Flexbox三列布局：带自动垂直滚动条但容器无法占满100%屏幕高度

嘿，我来帮你搞定这个三列布局的问题～你想要的效果是三列始终填满容器的垂直空间，内容过多时各自显示滚动条，而且绝对不能缩到容器100%高度以下对吧？先看你代码里的几个小问题，再给你调整后的完整方案：

首先你代码里有个拼写错误：.main里的flex-diretion应该是flex-direction，这个小错误会直接导致布局逻辑出问题。另外，你把overflow:auto加在了.container上，这会让整个容器滚动而不是单独每一列，而且子列的min-height:100%在flex布局里需要配合额外设置才能生效。

下面是修正后的完整代码，我会一步步给你解释关键点：

/* 先给根元素设置高度，让.main的100%高度有基准 */
html, body {
  height: 100%;
  margin: 0;
}

.main {
  min-height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column; /* 修正拼写错误 */
}

.container {
  display: flex;
  flex-direction: row;
  flex: 1; /* 让.container填满.main的剩余垂直空间 */
  gap: 10px; /* 可选：给列之间加间距，方便区分布局 */
}

.container > div {
  flex: 1; /* 三列平分宽度 */
  display: flex;
  flex-direction: column;
  min-height: 0; /* 关键：解除flex子元素的高度限制，确保overflow生效 */
  overflow-y: auto; /* 内容过高时显示垂直滚动条 */
  border: 1px solid #ccc; /* 可选：加边框方便直观看到布局范围 */
}

关键逻辑说明： #

• 根元素高度设置：html, body { height:100%; }是基础，因为min-height:100%需要父级有明确的高度参考，这样.main才能占满整个视口高度。
• .container的flex:1：让它自动填满.main里除了其他子元素（比如头部/尾部）之外的所有垂直空间，保证三列的容器高度足够。
• 子列的min-height:0：这是flex布局里的实用小技巧，默认情况下flex子元素会被内容撑开，不会遵守父级的高度限制，加上这个属性后，子列才能正确继承父容器的高度，同时让overflow-y:auto生效。
• 子列的overflow-y:auto：把滚动条放在每一列上，这样只有内容过多的列才会显示滚动条，其他列依然保持满高状态。

这样调整后，你的三列布局就能始终填满垂直空间，内容超出时各自滚动，而且永远不会收缩到容器100%高度以下啦～

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