为什么垂直滚动条会出现截断？

Question

我正在尝试显示一个页面，其中有两个可滚动的部分。我所看到的是，下部获得一个滚动条，但它被截断。当我更改该部分的高度属性时，从90％更改为50％，然后显示完整的滚动条。但是，如果我将浏览器的大小调整为较小的尺寸，则垂直滚动条会再次显示为截断。 最顶层div的CSS应该具有高度（以像素为单位）。

.rootsection {
    background-color: yellow;
    padding: 5px;
    margin: 5px;
    overflow:hidden;
    width: 100%;
    height: 200px;   
}

可滚动div的CSS是：

.bottomSectionScrollable{
    background-color: green;    
    overflow:auto !important;
    padding: 5px;
    margin: 5px;
    height: 90%;    
}

当高度更改为50％且根部高度未更改为200px时，我看到滚动条未被截断。我希望可滚动部分应该始终有一个永远不会被截断的垂直滚动条，它不应该留空格。即使在重新调整浏览器大小或对用户执行缩放/取消缩放操作时也应如此。我通过更改根部分的高度来模拟重新调整大小的动作。

FIDDLE

有关如何确保可滚动部分的滚动条始终可见并且即使重新调整浏览器大小也始终占用父框的整个空间的任何想法？