如何让Flexbox不超出容器空间？模态框高度溢出问题

我完全懂你这种头疼的情况——明明给外层模态框设置了max-height，嵌套的Flex容器却不遵守约束，还没法修改HTML结构，简直挠头。别担心，咱们用标准CSS属性就能搞定，不用依赖兼容性差的-webkit-fill-available。

问题根源 #

你的.modal只是个普通块级元素，虽然设置了max-height，但它没有给子元素.modal-content传递高度约束。.modal-content作为Flex容器，会默认根据内容撑开高度，直接忽略父元素的max-height限制，自然就会出现溢出问题。

解决方案 #

只需要给.modal和.modal-content添加几行CSS，让高度约束能正确传递下去：

.modal {
  /* 保留原有属性 */
  width: 30rem;
  max-width: calc(50vw - 3rem);
  max-height: calc(100vh - 3rem);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 3px;
  line-height: 1.5rem;
  
  /* 新增以下属性，让.modal成为Flex容器 */
  display: flex;
  flex-direction: column;
  min-height: 0; /* 解决Flex容器的最小高度陷阱，确保子元素能正确响应溢出 */
}

.modal-content {
  /* 保留原有属性 */
  display: flex;
  flex-direction: column;
  min-height: 0;
  
  /* 新增：让.modal-content填满.modal的可用空间 */
  flex: 1;
}

为什么这样有效 #

1. 把.modal变成Flex容器：Flex容器会自动约束子元素的尺寸，让.modal-content无法超出.modal的max-height范围。
2. flex-direction: column：保持模态框的垂直布局方向，和内部.modal-content的布局逻辑一致。
3. min-height: 0：这是关键！Flex容器默认会根据子元素的最小内容高度来计算自身高度，加上这个属性可以强制容器遵守设置的max-height，让溢出规则生效。
4. .modal-content的flex:1：让它填满.modal的全部可用空间，这样内部的.modal-content__body就能利用剩余空间，在内容过多时触发滚动。

修改后的完整示例 #

下面是调整后的完整代码，你可以直接测试效果：

CSS

/* Centers the child */
.modal-container {
 display: flex;
 align-items: center;
 justify-content: center;
}
/* The box in the middle, that should grow organically, but be restricted as well */
.modal, .modal-content--merged-with-modal {
 width: 30rem;
 max-width: calc(50vw - 3rem);
 max-height: calc(100vh - 3rem);
 /* Irrelevant styling */
 background: rgba(255, 255, 255, 0.6);
 border-radius: 3px;
 line-height: 1.5rem;
 /* 新增Flex相关属性 */
 display: flex;
 flex-direction: column;
 min-height: 0;
}
.modal-content {
 display: flex;
 flex-direction: column;
 min-height: 0;
 /* 新增：填满父容器空间 */
 flex: 1;
}
.modal-content__body {
 flex: 1;
 min-height: 0;
 overflow-y: scroll;
 /* Irrelevant styling */
 padding: 0.75rem;
 background: rgba(0, 0, 255, 0.1);
}
.modal-content__footer {
 /* Irrelevant styling */
 border-top: 1px solid silver;
 background: rgba(0, 255, 0, 0.1);
 padding: 0.75rem;
}
/* Irrelevant styling to present the problem */
html {
 font-family: arial, sans-serif;
 font-size: 16px;
}
main {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
}
section {
 flex: 1;
 background: rgba(255, 0, 0, 0.1);
}

HTML

<main>
 <section class="modal-container">
 <div class="modal-content modal-content--merged-with-modal">
 <div class="modal-content__body">
 <code>BODY // </code> srollable<br>
 <br>
 Container resizes as expected when<br>
 the container height is reduced.<br>
 <br>
 In this case, the modal is the same<br>
 element, as the flexbox handling<br>
 the body and the footer.<br>
 . <br>
 . <br>
 . <br>
 . <br>
 . <br>
 . <br>
 . <br>
 </div>
 <div class="modal-content__footer">
 <code>FOOTER // </code> Works
 </div>
 </div>
 </section>
 <section class="modal-container">
 <div class="modal">
 <div class="modal-content">
 <div class="modal-content__body">
 <code>BODY // </code>simply grows<br>
 <br>
 Container overflows when<br>
 the container height is reduced.<br>
 <br>
 In this case, the modal <strong>contains</strong><br>
 the flexbox, that handles the<br>
 body and the footer.<br>
 . <br>
 . <br>
 . <br>
 . <br>
 . <br>
 . <br>
 . <br>
 </div>
 <div class="modal-content__footer">
 <code>FOOTER // </code> Doesn't work
 </div>
 </div>
 </div>
 </section>
</main>

现在你可以看到右边的模态框也能正常工作了：内容超过max-height时，.modal-content__body会垂直滚动，底部的footer始终固定在模态框底部，不会溢出父元素。

内容的提问来源于stack exchange，提问作者enyo