子元素的宽度从带有垂直滚动条的Chrome到Firefox不等

Question

我正在尝试使子div的宽度与父div的宽度相同。父div具有垂直滚动条。在Chrome中，当我将子级设置为父级宽度的100％时，除滚动条外，子级的宽度为100％。在Firefox中，子级是宽度（包括滚动条）的100％。我该如何协调它们以相同的方式呈现（两个浏览器都显示包含或不包含滚动条的子对象）？我需要这种一致性，以便在放置其他元素时处理一个或另一个宽度。 CSS或JS中的任何解决方案都对我有用。

//HTML
<div class="scrollableParent">
    <div class="child" />
</div>

//CSS
.scrollableParent {
    position: absolute;
    width: 100%;
    overflow:hidden;
    overflow-y: scroll;
    height: 40rem;
}
.child {
    width: 100%;
}

注意：看来Firefox/Chrome alignment differences with Scrollbar是一个类似的问题，但是答案并未提供对我的情况有用的解决方案，也许是因为问题的措词不同。