我的div中需要一个滚动条，但当div为空时我得到一个滚动条？

Question

嘿伙计们，我有一个奇怪的问题，我似乎无法弄明白。当我没有动态调整div的大小时，div会按预期工作，当它被填满时会得到y滚动条。但是，当我根据窗口调整大小eventListener动态更改高度时，无论我的div内部没有任何内容，我都会得到一个y滚动条。它位于另一个div中，如果与它有任何关系，它就是一个flexbox。但我不这么认为。有谁知道这里发生了什么？

<div style={{height: `${this.state.height}px` }} id="mainpage">
                </div>

我最初的css：

#mainpage {
    margin-left: 10%;
    margin-right: 10%;
    padding-top: 20px;
    border: 2px black solid;
    overflow-y: auto;
    height: 0px;
}

所以我发现了最奇怪的事情。如果我通过使用document.getElementById（“mainpage”）更改div的高度.style.height = ${window.innerHeight - 320}px它将调出滚动条（假设它最终会达到462px）但是如果我是document.getElementById（“主页“）。style.height = ${890 - 320}px这是570px它不会调出滚动条。这是一个反应应用程序我将css代码和布局移植到常规的非反应应用程序，这不是问题。 ＆LT;。＆LT;

所以我修复了它，但这是一个奇怪的解决方案。我正在玩边框并将尺寸增加一个，现在一切正常。 ＆LT;。＆LT;