CSS中height的min-content与max-content区别及height的min-content表现解析

结合你提供的测试代码：

<div class="child">
<embed src="/images/food.jpg">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, aperiam accusantium doloremque nobis libero beatae! Ipsum, deleniti minus, velit accusantium necessitatibus dolore, corporis adipisci obcaecati sapiente illum facere est voluptas?riam accusantium doloremque nobis libero beatae! Ipsum, deleniti minus, velit accusantium necessitatibus dolore, corporis adipisci o</p>
</div>

.child{
    border: 2px solid black;
    height: min-content;
    /* width: min-content; */
    background-color: azure;
}

先对应你熟悉的width逻辑，再讲height的差异：

• width的min-content：容器缩到内容不溢出的最小宽度（比如长单词、图片宽度），文本自动换行；
• width的max-content：容器扩到内容不换行的最大宽度，文本一行显示。

到height维度，核心是基于内容的极限状态计算高度，但因为文本高度由宽度决定，表现和width完全不同：

height: min-content #

容器高度会取「内容刚好不溢出的最小高度」——也就是内容在最宽显示状态（文本一行不换行）下的高度，再小就会让内容溢出。

在你的测试代码里，容器默认宽度是父容器100%，文本自动换行，所以height: min-content的高度等于换行后的文本高度+图片高度，看起来和height: auto表现一致。但如果把容器宽度拉到足够大（比如远长于文本长度），文本会一行显示，此时容器高度会收缩到单行文本的高度，刚好容纳内容。

height: max-content #

容器高度会取「内容能达到的最大高度」——也就是内容在最窄显示状态（每个单词/字符单独一行）下的高度，无论当前容器宽度是多少，都会用这个最大高度值。

比如给你的测试容器添加width: 2000px并设置height: max-content，文本会一行显示，但容器高度还是文本在最窄宽度下的换行高度，此时容器底部会出现大量空白；如果把容器宽度设为极小值，文本换满行，height: max-content的高度就和height: auto一致，刚好容纳所有换行后的内容。

核心差异总结 #

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