CSS Flexbox模态框布局异常求助：大内容时内容被截断

核心思路 #

• 限制模态框最大高度为视口高度的90%，避免内容溢出屏幕边界
• 用margin: auto替代固定的justify-content: center，实现内容少时垂直居中、内容多时顶部对齐的自适应效果
• 给模态框内容区域添加垂直滚动属性，长内容时可滚动查看完整内容

修改后的关键代码 #

CSS部分

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-start;
  padding: 20px;
  box-sizing: border-box;
}

.modal {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  margin: auto 0;
}

.modal-content {
  flex: 1;
  overflow-y: auto;
}

HTML结构示例

<div class="modal-container">
  <div class="modal">
    <h3>模态框标题</h3>
    <div class="modal-content">
      <!-- 此处放置内容：短内容时模态框居中，长内容时内容区自动滚动 -->
    </div>
    <button>关闭</button>
  </div>
</div>

原理说明 #

• modal-container设置align-items: flex-start让模态框默认顶对齐，配合modal的margin: auto 0，当内容高度小于容器可用空间时，上下margin自动填充实现居中；当内容高度超过最大限制时，margin失效，模态框保持顶对齐。
• max-height: 90vh确保模态框不会完全占满屏幕，保留操作边距。
• modal-content的flex:1让它占满模态框剩余高度，内容超出时自动触发垂直滚动。

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