防止子div扩展到父级之外？

Question

Jsfiddle 显示问题： https ://jsfiddle.net/ibrewster/g6v2x7ku/12/

注意粉色 div 是如何扩展到蓝色 div 之外的。

我正在尝试制作一个简单的布局，其中我有两个嵌套的 div，它们扩展到一定高度（在这种情况下需要 100% 的窗口高度），内部 div 会根据需要滚动以显示其他内容。因此，如果内容很短，则 div 会全部折叠到内容的大小，但如果内容很长，它们只会扩展到一个点，此时内部 div 应该滚动。

的HTML：

 <div id="topDiv">
  <div id="insideDiv">
    Some inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br>
  </div>
</div>

和CSS：

 html,
body {
  height: 100%;
}

#topDiv {
  background-color: lightblue;
  max-height: 50px;
  width: 100%;
  padding: 10px;
}

#insideDiv {
  background-color: pink;
  max-height: 100%;
  overflow-y:auto;
}

请注意，如果 topDiv 的最大高度设置为百分比，效果是相同的，在这种情况下，我不能简单地将 insideDiv 的最大高度值设置为适当较小的值。此外，将 --- 上的 topDiv overflow 属性设置为隐藏不起作用 - insideDiv 中的额外内容完全隐藏，无法通过滚动访问。

如何限制 insideDiv 的高度不超过 topDiv 的高度，并且 insideDiv 根据需要滚动任何额外的内容？

原文由 ibrewster 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以将 #insideDiv 的 max-height CSS 属性从 100% 更改为 inherit 所以这条规则将是这样的：

max-height: inherit;

如果您走这条路线，您可能还想添加 box-sizing:border-box; ，因为这将允许 #insideDiv 上的任何边框或填充（可能）表现得像（可能）期望的那样。

---

这个问题的原因是 max-height:100%; 寻找父母的 height ，而不是它的 max-height 它允许有多高。因此，您最终会遇到经典的非确定性相对高度问题。如果你给父母一个确定性的 height （而不是 max-height ）， 100% 可以确定性地解决。

原文由 Arkoudinos 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

有一个答案，如果你应用 max-height 和 overflow 属性不要忘记给 position:relative 给同一个元素！

这就是帮助我的原因。

原文由 Akshay Vijay Jain 发布，翻译遵循 CC BY-SA 4.0 许可协议