为什么flex-direction为column时flex子元素不会自动收缩适配父容器高度

当flex-direction为默认值row时，给flex子元素设置width属性后，子元素会自动收缩适配父容器宽度，不会保持设置的300px宽度，这是因为flex布局中flex-shrink属性的默认值为1。但当flex-direction修改为column时，flex子元素会溢出父容器设置的height范围。

CSS代码 #

.box-1 {
  background: #e51400;
}
.box-2 {
  background: #fa6800;
}
.box-3 {
  background: #f0a30a; 
}
.box-4 {background: #e3c800; }
.box-5 {background: #a4c400;}
.box-6 {background: #60a917;}
.box-7 {background: #00aba9;}
.box-8 {background: #1ba1e2;} 
.box-9 {background: #aa00ff;}

.container {
  display: flex;
  border: 8px solid black;
  height: 500px;
  display: flex;
  flex-direction: column;
}

.box {
    font-size: 50px;
    color: white;
    text-align:center;
    font-family: lato;
    font-weight: 300;
    box-sizing: border-box;
    width: 300px;
}

HTML代码 #

<section class="container">
        <div class="box box-1">1</div>
        <div class="box box-2">2</div>
        <div class="box box-3">3</div>
        <div class="box box-4">4</div> 
        <div class="box box-5">5</div>
        <div class="box box-6">6</div>
        <div class="box box-7">7</div>
        <div class="box box-8">8</div>
        <div class="box box-9">9</div>  
</section>

• 首先明确flex布局的核心规则：flex-shrink的收缩作用仅生效于主轴方向的子项尺寸，且无法将子项压缩到小于其主轴方向的最小内容尺寸。
• row方向正常收缩的原因：flex-direction: row时主轴为水平方向，你给子项设置了明确的width: 300px作为主轴基础尺寸，子项总宽度超过父容器宽度时，默认flex-shrink:1会生效，按比例压缩子项宽度适配父容器。
• column方向溢出的原因：flex-direction: column时主轴切换为垂直方向，此时主轴尺寸对应子项的高度。你的代码中没有给.box设置明确的height属性，每个子项的高度默认由50px的文字内容撑开，这个高度属于子项的最小内容高度，且flex布局中flex子项的min-height默认值为auto，也就是强制子项高度不小于最小内容高度。9个子项的最小内容高度总和已经超过父容器设置的500px高度，flex-shrink无法突破最小高度限制继续压缩，因此会溢出父容器。

如果需要实现column方向下子项自动收缩适配父容器高度，可以选择以下任意一种方案：

• 给.box添加明确的height属性，此时子项有可压缩的主轴基础尺寸，flex-shrink会正常生效按比例压缩适配
• 给.box添加min-height: 0，手动覆盖默认的min-height: auto限制，允许子项高度被压缩到小于内容高度
• 给父容器.container添加overflow: auto，让溢出的部分以滚动形式展示，避免内容溢出到容器外

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