“最低高度：最高含量”是什么意思？

问题描述

在以下示例中，为什么父级的高度为200px而不是300px？

#p {
    height: 200px;
    min-height: max-content;
    border: 1px solid blue;
}

#c {
    margin: 0 50px 0 50px;
    height: 300px;
    background: red;
}

<div id="p">
      <div id="c">
      </div>
</div>

如果我直接设置height: max-content，则高度将正确设置为300px。在这种情况下，这不是指max-content = 300px吗？因此，min-height: max-content是否应该与min-height: 300px相同？

#p {
    height: max-content;
    border: 1px solid blue;
}

#c {
    margin: 0 50px 0 50px;
    height: 300px;
    background: red;
}

<div id="p">
      <div id="c">
      </div>
</div>

在height和min-height之间显然没有“冲突”：

#p {
    height: 200px;
    min-height: 400px;
    border: 1px solid blue;
}

#c {
    margin: 0 50px 0 50px;
    height: 300px;
    background: red;
}

<div id="p">
      <div id="c">
      </div>
</div>

此外，如果将height和min-height更改为width和min-width，它会按预期工作。为什么？

#p {
    width: 200px;
    min-width: max-content;
    border: 1px solid blue;
}

#c {
    margin: 0 50px 0 50px;
    width: 300px;
    background: red;
}

<div id="p">
      <div id="c">
          hello
      </div>
</div>

解决方法

这有点棘手，您需要参考the specification才能理解这一点：

最大含量

如果为内联轴指定，则使用最大内容内联大小； 否则将作为属性的初始值。

在您的情况下，由于内联大小是宽度，块大小是高度，您将落入初始值。

在same specification中，您还可以了解如何识别行内/块大小

换句话说，设置min-height:max-content无效，因为它将被计算为initial值，但是它是min-width的有效值，因为它是内联大小。

更多详细信息：https://www.w3.org/TR/css-writing-modes-4/#abstract-axes

,

只需从第一个示例中删除height: 200px;，因为它会与min-height发生冲突，您将看到您的代码片段将像第二个一样工作良好。 像这样：

#p {
    min-height: max-content;
    border: 1px solid blue;
}

#c {
    margin: 0 50px 0 50px;
    height: 300px;
    background: red;
}

<div id="p">
      <div id="c">
      </div>
</div>

对于您的主要问题，min-height: max-content表示元素将保持最小高度，而不会引起其内容的垂直溢出。