CSS：没有100％高度/宽度的滚动条

Question

是否可以强制垂直滚动条具有小于100％的可滚动div高度，这是使用纯CSS的一部分，并且适用于除IE以外的所有现代浏览器？

到目前为止，我只想出了带有::-webkit-scrollbar CSS选择器的仅webkit 解决方案，以及用于自定义按钮高度的技巧，例如：

.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插件/ librariers /软件包。

这是仅限CSS的问题。我知道有些JS插件可以创建我想要的任何滚动条。