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

user_422544 0
Viewed 704

Why is the height of the parent 200px instead of 300px in the following example?

#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>

If I set height: max-content directly, the height will be set correctly to 300px. Doesn't this mean max-content = 300px in this case? Therefore shouldn't min-height: max-content be the same as 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>

And apparently there is no "conflict" between height and 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>

Moreover, if you change height and min-height to width and min-width, it works as expected. Why?

#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>

specifications css
2 Answers

It's a bit tricky and you need to refer to the specification to understand this:

max-content

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

In your case you will fall in to the initial value because the inline size is the width and the block size is the height.

In the same specification you can also understand how to identify inline/block size

enter image description here

In other words, setting min-height:max-content will have no effect since it will get computed to the initial value but It works for the min-width since it's the inline size.

More details: https://www.w3.org/TR/css-writing-modes-4/#abstract-axes

user_86203330

Just remove height: 200px;, because it goes into conflict with min-height, from the first example and you'll see that your snippet will work well just as the second one. Like this:

#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>

For your main question, min-height: max-content mean that the element will keep the minimum height without causing the vertical-overflow of his content.

user_67843850
Related