CSS:使用子元素处理溢出

Question

我在这个架构中有一段 html 代码:

<div id="container">
    ... some divs ...
    <div id="results">
        ... some content ...
    </div>
</div>

results 中写入的内容会发生变化，有时 results 的高度会超过 container 的底部。我想要 results 处理滚动条溢出而不是 container 但我似乎无法解决这个问题。我应该怎么办？我对 javascript 解决方案持开放态度，只要它们能够灵活地适应窗口大小的变化。

注意:results div 在 CSS 中没有固定的非百分比高度，它也不可能有。

Answer 1

如果你有能力使用 flexbox，你可以通过以下方式解决它(为简洁起见省略了前缀):

#container {
  height: 150px;
  display: flex;
}

#results {
  overflow-y: scroll;
}

https://jsfiddle.net/4n3tmbm3/5/