¿Es posible forzar a la barra de desplazamiento vertical a tener menos del 100% de altura del div desplazable que es parte decon CSS puro y para todos los navegadores modernos excepto IE?

Hasta ahora todo lo que se me ocurrió es webkit-only solución con su::-webkit-scrollbar Selectores CSS, y truco para la altura de botones personalizados, así:

.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>

Intenté engañar a.parent contransform: scale en una sola dirección, así que para reducir el contenido principal y aumentar el contenido con el mismo valor, así:

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

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

... pero no funciona, ya que el niño no puede extender las dimensiones del padre sin la posición absoluta, lo que lo hace invisible para el padre y la barra de desplazamiento innecesaria.

Si hay alguna otra manera, soy todo oídos, ya que prefiero CSS sobre complementos / bibliotecas / paquetes JS adicionales.

Es una pregunta solo de CSS. Sé que hay complementos JS que pueden crear cualquier barra de desplazamiento que quiera.