Html 防止子div在父div之外扩展？

显示问题的JSFIDLE：

请注意粉色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>

请注意，如果将

topDiv

的最大高度设置为某个百分比，则效果相同，在这种情况下，我不能简单地将

insideDiv

的最大高度值设置为适当较小的值。此外，将

topDiv

上的

overflow

属性设置为hidden也不起作用-此时

insideDiv

中的额外内容完全隐藏，无法通过滚动访问

---

如何限制

insideDiv

的高度不超过

topDiv

，并根据需要滚动任何额外内容？

您需要移动

overflow-y:auto至
#topDiv

然后，您可以将“最大高度”值修改为任意值，它们将按预期工作。
您可以将
\insideDiv
的
max height
CSS属性从
100%
更改为
继承
。所以这个规则是这样的：

最大高度：继承

您可能还需要添加
框大小：边框框
如果您走这条路线，因为这将允许
#insideDiv
上的任何边框或填充按（可能）所需的方式运行


该问题的原因是
最大高度：100%
查找父对象的
高度
，而不是其
最大高度
，以确定允许的高度。因此，您最终会遇到经典的非确定性相对高度问题。如果给父级一个确定性的
高度
（而不是
最大高度
），
100%
可以确定地解析
 根据我对你问题的理解。这段代码应该工作得很好


html，
身体{
高度：100vh；
宽度：100%
填充：0px；
边际：0px；
}
#托普迪夫{
填充：10px；
背景颜色：浅蓝色；
宽度：计算（100%-20px）；
最大高度：计算（100vh-20px）；
}
#内迪夫{
宽度：计算（100%-40px）；
背景颜色：粉红色；
最大高度：继承；
溢出：滚动；
}

一些内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容


试试这个flexbox布局，它可以在固定高度或百分比/最大高度下正常工作



html，正文{
身高：100%；
保证金：0；
}
#托普迪夫{
背景颜色：浅蓝色；
最大高度：50%；
填充：10px；
框大小：边框框；
显示器：flex；
弯曲方向：立柱；
}
#内迪夫{
背景颜色：粉红色；
溢出y：自动；
}

没有滚动内容
一些内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容


只有一行答案，如果您应用
最大高度
和
溢出
属性，请不要忘记为同一元素指定
位置：相对

这对我很有帮助。
max height:inherit
，假设您总是在您的父母身上设置最大高度。还需要放置
框大小：边框框#insideDiv
上设置code>，以便您可以自由设置其填充/边框。
溢出：滚动
@Abhi将始终显示滚动条，但不会限制高度。问题似乎是
max height
作为百分比在其父级上查找
height
，但找不到，因此遇到了常见的“不确定相对高度”问题。为什么不在外部div上设置溢出？不需要在内部设置任何内容。@pangloss我发现两种方式都有相同的效果。我在我的示例中使用了固定像素，因为它更容易显示问题，但是是的，我的生产代码使用了百分比。这使得
#topDiv
是滚动的，实际上并没有限制
#insideDiv
的高度。啊，我的错误。我误解了这个问题。我同意其他答案。不，我不希望topDiv滚动-我希望insideDiv滚动，并且永远不会变大到topDiv想要滚动的程度。使父div滚动，而不使子div滚动。问题是子div没有高度限制。@JeffArries现在您将最大高度设置为屏幕高度的100%，这意味着页面始终可以生成垂直高度
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;
}