fixed定位div未设置height时overflow失效的模态框布局问题求解

我要做一个模态框，要求它能根据内容自适应高度，同时用max-height限制最大高度。但现在碰到个问题：只有给类名为.b的fixed定位元素加height，里面的.d和.g的overflow才会生效；可一加height，模态框就没法自适应内容高度了。

解决方案 #

核心是用flex布局替代固定高度设置，让模态框容器自动适配内容，同时给内部元素提供明确的高度上下文：

• 给.b添加display: flex并设置纵向排列，移除height: 100%——flex容器会根据子元素内容自动调整高度，同时max-height会限制它的最大高度。
• 将.c的height: 100%改为flex-grow: 1，让它填满.b的可用空间，确保内部flex布局能正确计算高度。
• 移除.e的height: 100%，因为它是纵向flex布局，flex-grow: 1已经能让.g自动填充剩余空间，不需要固定高度。

修改后的代码 #

CSS

html, body {
  height: 100%;
  margin:0;
}

.a {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0001;
}

.b {
    padding: 1.4em;
    box-shadow: 1px 1px 6px #0002;
    border-radius: 5px;
    position: fixed;
    background: white;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    width: min(90%, 1200px);
    max-height: min(90%, 1000px);
    overflow: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.c {
    display: flex;
    flex-grow: 1;
    gap: 1em;
}

.d {
    flex-grow: 1;
    overflow: auto;
}

.e {
    flex-grow: 3;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    overflow: auto;
}

.g {
    flex-grow: 1;
    overflow: auto;
}

HTML（无需修改）

<div class="a">
  <div class="b">
    <div class="c">
      <div contenteditable class="d">sidebar</div>
      <div class="e">
        <div class="f">
          top bar
        </div>
        <div contenteditable class="g"></div>
        <div class="h">
          pagination
        </div>
      </div>
    </div>
  </div>
</div>

原理说明 #

fixed定位元素默认高度由内容决定，没有固定height时，内部元素无法获取明确的高度参考，导致overflow失效。通过把.b设为flex容器，.c通过flex-grow:1填充容器高度，内部的flex子元素就能获得明确的高度上下文，overflow属性正常工作；同时.b依然能根据内容自适应高度，不会超过max-height设置的上限。

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