CSS Flexbox问题：无法滚动查看溢出内容

问题原因 #

你给#flex-container设置了height:100%，这会把容器高度固定在父元素（body）的高度值上，当内容超出容器高度时，容器不会自动扩展；同时默认情况下html和body的高度未被设置为视口高度，导致height:100%的参考基准不完整，加上未给容器正确配置滚动规则，最终出现内容溢出却无法滚动的情况。

解决方案 #

调整以下核心设置：

• 给html和body设置高度，确保flex容器的高度参考基准正确
• 将#flex-container的height:100%改为min-height:100vh，实现内容少时容器占满视口居中、内容多时容器自动扩展高度
• 给#flex-container添加overflow-y: auto，让溢出内容可垂直滚动

修改后的完整代码 #

HTML（修复闭合标签错误） #

<body>
  <div id="flex-container">
    <div class="content">
      <!-- 示例大量内容 -->
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
    </div>
    <div class="content">
      <!-- 更多示例内容 -->
      <p>更多测试内容</p>
      <p>更多测试内容</p>
      <p>更多测试内容</p>
      <p>更多测试内容</p>
      <p>更多测试内容</p>
      <p>更多测试内容</p>
    </div>
  </div>
</body>

CSS #

html, body {
  height: 100%;
  margin: 0; /* 去除默认边距，避免布局偏移 */
}

#flex-container{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height:100vh; /* 替换height:100%，实现自适应高度 */
  overflow-y: auto; /* 内容溢出时显示垂直滚动条 */
}

.content{
  width:75%;
  margin: 1rem 0; /* 给内容块添加上下间距，提升美观度 */
}

原理说明 #

• min-height:100vh：保证容器至少占满整个视口高度，当内容总高度超过视口时，容器会自动拉伸以容纳所有内容
• overflow-y: auto：仅在内容溢出容器时显示垂直滚动条，内容未溢出时不显示滚动条
• 给html和body设置height:100%是为了让min-height:100vh的参考基准生效，同时去除默认边距避免不必要的布局空白

内容的提问来源于stack exchange，提问作者moonlight-hollow