为何CSS中min-height: min-content在flex-column布局下无法生效？

问题原因 #

这一现象是CSS规范对水平、垂直方向的尺寸约束逻辑不同导致的：

• 水平方向（对应flex-direction: row主轴）：块级元素默认宽度为填充父容器，min-width: min-content会正常计算内容所需的最小宽度，且优先级高于显式设置的width，当内容宽度大于设置的width时，会自动撑开父容器宽度。
• 垂直方向（对应flex-direction: column主轴）：块级元素默认高度为收缩适应内容，但一旦给元素显式设置了固定height值，min-height: min-content的计算逻辑会发生变化，浏览器会优先采用你设置的固定高度，不会根据内容高度自动撑开，因此会出现子元素溢出裁剪的情况。

解决方案 #

如果要实现和row方向一致的效果：父元素高度在内容不足时保持设定的最小值，内容超出时自动撑开，直接移除显式的height设置，改为用min-height设置你需要的最小高度即可。块级元素默认height: auto时会自动被内容撑开，不需要额外设置min-height: min-content。

修正后代码示例 #

.flex-col{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border: 2px solid black;
}
.block-col{
    align-self: stretch;
    background-color: red;
    height: 300px;
    border: 2px solid blue;
}

<div class="flex-col" style="min-height: 100px; width : 200px; ">
    <div class="block-col"></div>
    <div class="block-col"></div>
</div>

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