为何CSS中min-height: fit-content搭配resize属性不生效？

修复代码 #

给父容器添加垂直方向的flex布局，即可让min-h-fit正常生效：

<div class="h-fit w-fit min-h-fit min-w-fit resize overflow-hidden bg-gray-200 flex flex-col">
    <div> Content goes here.</div>
    <div> Content goes here.</div>
    <div> Content goes here.</div>
    <div> Content goes here.</div>
    <div> Content goes here.</div>
</div>

原因解释 #

块级元素的宽高计算逻辑存在差异：

• 宽度维度：块级元素默认会拉伸至父容器宽度，min-w-fit（对应min-width: fit-content）会限制容器宽度不能小于内容宽度，因此表现符合预期。
• 高度维度：块级元素默认高度为auto，仅由内部内容撑开。此时min-height: fit-content会被浏览器判定为auto，因为缺少明确的布局上下文来触发min-height的约束逻辑。

将父容器改为flex或grid布局后，容器高度会和子元素高度关联计算，此时min-h-fit就能正确识别内容高度并生效。你也可以用display: grid替代flex flex-col，效果一致。

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