CSS: 使用子元素处理溢出

Question

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

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

results中写入的内容发生变化，有时 results' 的高度会超过 container[=24] =]的底部。我想要 results 处理滚动条溢出而不是 container 但我似乎无法解决这个问题。我应该怎么办？我愿意接受 javascript 解决方案，只要它们能够灵活地适应 window 大小的变化。

注意：results div 在 CSS 中没有固定的非百分比高度，也不会有。

Answer 1

你可以这样走：

#container {overflow: hidden;}
#results {
    max-height: 400px;
    overflow: scroll;
}

这将实现您想要实现的目标，如果还需要什么，请告诉我？

Answer 2

在child上使用overflow-y: auto，在parent上使用overflow-y: hidden，如果不能给出固定高度，请给出max-height。

#container {
  overflow-y: hidden;
}

#results {
  max-height: 200px;
  overflow-y: auto;
}

Answer 3

如果你能负担得起使用 flexbox 你可以通过以下方式解决它（为简洁起见省略前缀）：

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

#results {
  overflow-y: scroll;
}

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

CSS: 使用子元素处理溢出

CSS: Handle overflow using the child element

css

overflow