如何用Flex CSS修复Div内容高度溢出并实现滚动（附示例）

我看了你的代码，问题出在.row.content的样式设置上——你同时给这个容器加了flex-flow: column和justify-content: center，这会干扰滚动效果的触发。

问题原因 #

当在flex column模式下使用justify-content: center垂直居中内容时，flex容器会优先保证内容的居中布局逻辑。即使内容高度超过容器可用空间，容器也会被内容撑开，而不会触发overflow-y: auto的滚动行为。

修复方案 #

我们可以把「内容居中」和「容器滚动」的职责拆分：让.row.content只负责提供滚动能力，在它内部嵌套一个专门的容器来处理内容的居中对齐。

修改后的CSS代码

html, body { height: 100%; margin: 0 }
.box { display: flex; flex-flow: column; height: 100%; }
.box .row { border: 1px dotted grey; }
.box .row.header { flex: 0 1 auto; }
/* 调整content容器，只保留滚动核心设置 */
.box .row.content { flex: 1 1 auto; overflow-y: auto; }
/* 新增内部容器，专门处理内容居中 */
.content-inner {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 100%; /* 确保内容不足时也能填满容器并保持居中 */
  padding: 1rem; /* 可选：添加内边距避免内容贴边 */
}
.data { width: 80%; min-height: 400px; }
.box .row.footer { flex: 0 1 40px; }

修改后的HTML代码

<head>
<link href="./test.css" rel="stylesheet">
</head>
<body>
<div class="box">
  <div class="row header">
    <p>
      <b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <!-- 新增内部容器包裹所有内容 -->
    <div class="content-inner">
      <div class="data"> invisible box1 </div>
      <div class="data"> visible box2 </div>
      <div class="data"> visible box3 </div>
      <p>
        <b>Bottom Box is visible with scroll.</b> (fills remaining space)
      </p>
    </div>
  </div>
  <div class="row footer">
    <p>
      <b>footer</b> (fixed height)</p>
  </div>
</div>
</body>
</html>

效果说明 #

• .row.content现在会被父容器.box严格限制高度，当内部内容高度超过容器时，自动触发垂直滚动。
• .content-inner负责将内容在垂直和水平方向居中，min-height:100%确保内容不足时也能填满容器，保持预期的居中效果。

内容的提问来源于stack exchange，提问作者Vijay Shanker Dubey