`min-height: max-content` 是什么意思？

Question

为什么下例中父级的高度是 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>

Answer 1

只需从第一个示例中删除 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意味着该元素将保持最小高度而不会导致他的内容vertical-overflow。

Answer 2

这有点棘手，你需要参考the specification来理解这个：

max-content

If specified for the inline axis, use the max-content inline size; otherwise behaves as the property’s initial value.

在您的情况下，您将落入初始值，因为行内大小是宽度，块大小是高度。

在same specification你还可以了解如何识别inline/block尺寸

换句话说，设置 min-height:max-content 不会有任何效果，因为它将被计算为 initial 值，但它适用于 min-width，因为它是内联大小。

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

`min-height: max-content` 是什么意思？

What does `min-height: max-content` mean?

css

specifications