提问人：godfryd 提问时间：11/16/2023 更新时间：11/16/2023 访问量：42
如何使不断增长的 div 不会溢出其包含固定 div 的父级 [duplicate]
how to make growing div not overflowing its parent that contains also fixed div above [duplicate]
问：
在下面的代码中，主 div 已设置为（其具有高度的父级）。这个主 div 包含两个子项：一个具有固定高度，第二个具有 并且其具有大量内容的子项已设置 。max-height100%300pxflex-grow: 1overflow-x: scroll
问题在于，第二个孩子及其大子子不想表现良好，但很粗鲁，并溢出了他们的父母（主 div）。 如何解决？
<html>
<head>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
</style>
</head>
<body style="height: 300px; max-height: 300px; margin: 0px; padding: 5px; border: 1px solid red;">
<div style="height: 100%; max-height: 100%; display: flex; flex-direction: column; margin: 0px; padding: 5px; border: 1px solid green;">
<div style="height: 50px; padding: 5px; border: 1px dashed blue;">
top
</div>
<div style="flex-grow: 1; display: flex; padding: 5px; border: 1px dashed orange;">
<div style="padding: 5px; border: 1px dashed blue;">
left
</div>
<div style="flex-grow: 1; padding: 5px; border: 1px dashed blue; overflow-y: scroll;">
center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>
center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>
</div>
<div style="padding: 5px; border: 1px dashed blue;">
right
</div>
</div>
</div>
</div>
</body>
</html>答：
0赞
Shai V.
11/16/2023
#1
尝试使用 限制子项的大小。使用 时，它允许子元素增长以吸收容器中的额外空间，但当它的内容太大时，它不会自动将其大小限制在父元素的边界内。max-heightflex-grow: 1
以下是修复它的方法：
<html>
<head>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
</style>
</head>
<body style="height: 300px; max-height: 300px; margin: 0px; padding: 5px; border: 1px solid red;">
<div style="height: 100%; max-height: 100%; display: flex; flex-direction: column; margin: 0px; padding: 5px; border: 1px solid green;">
<div style="height: 50px; padding: 5px; border: 1px dashed blue;">
top
</div>
<!-- Set max height as you'd like -->
<div style="flex-grow: 1; display: flex; padding: 5px; border: 1px dashed orange; max-height: calc(100% - 50px);">
<div style="padding: 5px; border: 1px dashed blue;">
left
</div>
<div style="flex-grow: 1; padding: 5px; border: 1px dashed blue; overflow-y: scroll;">
center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>
center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>
</div>
<div style="padding: 5px; border: 1px dashed blue;">
right
</div>
</div>
</div>
</body>
</html>
评论
0赞
godfryd
11/16/2023
在这种情况下，没有做太多事情 - 我可以直接使用 calculated 而不是 .我简化了我的案子，并设置了上层的孩子。但是，如果它的高度不固定怎么办？那我就不能在下半个孩子使用。该怎么办？flex-grow: 1heightmax-height50pxmax-height
0赞
Shai V.
11/16/2023
在这种情况下，CSS Flexbox 可能会修复或满足您的需求。将容器设置为具有列方向的柔性容器，然后允许子项灵活地调整其高度，同时确保滚动内容不超过父项的边界。.flex-container { display: flex; flex-direction: column; height: 100%; max-height: 300px; padding: 5px; border: 1px solid green; }
上一个：反对返回属性？
下一个：如何调整布局控件大小
评论