CSS: полоса прокрутки, которая не имеет 100% высоты / ширины

Question

Можно ли заставить вертикальную полосу прокрутки иметь высоту прокрутки менее 100%, если она является частью с чистым CSS и для всех современных браузеров, кроме IE ?

Пока всепредложил решение только для webkit с его ::-webkit-scrollbar селекторами CSS и хитростью для высоты пользовательских кнопок, например:

.parent {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #000000;
  box-sizing: border-box;
  overflow-y: scroll;
}

.child {
  height: 200%;
  width: 100%;
  overflow: hidden;
}

.parent::-webkit-scrollbar {
  width: 12px;
}

.parent::-webkit-scrollbar-track {
  border: 1px solid #000000;
}

.parent::-webkit-scrollbar-thumb {
  background: #FF0000;
}

.parent::-webkit-scrollbar-button {
  background: transparent;
  height: 25%;
}

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
    deserunt mollit anim id est laborum.
  </div>
</div>

Я пытался обмануть .parent с transform: scale только в одном направлении, чтобы уменьшить родительский элемент и увеличить содержимое с тем же значением, например так:

.parent {
    transform: scale(0.5, 1);
}

.child {
    transform: scale(2, 1);
}

... но это не работает, так как дочерний элемент не может расширить размеры родителя без абсолютной позиции, что делает его невидимым для родителя и ненужную полосу прокрутки.

Если есть какие-либос другой стороны, я весь слух, так как я предпочитаю CSS, а не дополнительные плагины / библиотеки / пакеты JS.

Это вопрос только для CSS .Я знаю, что есть плагины JS, которые могут создавать любую полосу прокрутки, какую я захочу.