Div没有正确溢出内部html会改变programmaticaly

Question

我正在尝试设计一个网站，您可以在其中搜索搜索栏中的音乐，我希望在用户输入时显示建议，因此我使用javascript编程填充包含结果的div，但它溢出了窗口没有使主体或div本身可滚动，即使它设置为自动...

正如你可以看到的那样，子div大约是2000px高，这比父div更多。我读到，如果根元素设置为100％，则可以使用％高度，并且它似乎因为它适用于父级（如果我将它从父级中取出也将是2000px）。我没有得到的是为什么它对儿童div不起作用？

为了便于阅读，我取消了一些元素，但如果错误不在这里，我可以添加它们。

CSS

html, 
body {
    background-color: #2288ff;
    background-image:-webkit-radial-gradient(10% 20%, rgb(50,150,255), rgb(10,70,255));
    height: 100%;
    margin: 0;
    overflow: hidden;
}

#content_box {
    overflow: hidden;
    max-height: 100%;
    margin-bottom: 20px;
}

#searchbox{
    border: 3px solid #999999;
    border-radius: 10px;
    background: #000000;
    padding: 15px;
    margin: 30px;
}

#results {
    margin-left: 40px;
    margin-right: 40px;
    overflow: auto;
    opacity: 0.6;
    background-color: #000000;
    max-height: 100%;
}

HTML

<div id="content_box">
    <div id="searchbox">
        <form oninput="obtain()" action="/library/mresult.php" method="POST" autocomplete="off" onclick="shrink()">
            <input id="SInput" type="text" name="searchstring" onblur="expand()"/>
        </form>
    </div>
    <div id="results" >
    </div>
</div>

截图

Answer 1

要使div在另一个overflow: hidden容器内可滚动，您需要为其父级定义height。例如，您可以将#results包装在另一个div中：

#wrapper {
  height: 200px;
}
#results { 
  height: 100%;
  overflow-y: auto; /* just vertical scrolling if needed */
}

和一些基本的html

<div id="wrapper">
  <div id="results">
   <!-- your content -->
  </div>
</div>

否则#results div将根据需要进行扩展，因此无需滚动，而用户无法在视口外看到任何内容，因为禁止滚动。

DEMO