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

Question

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>

max-content = max height of what the parent contain... so if the container height will not be respected... — MaxiGui, Sep 04 '20 at 11:47
The intrinsic preferred height. The max-content height is, roughly, the height the content would have if no “soft” line breaks were inserted, i.e., if each paragraph is one long line. — Pete, Sep 04 '20 at 11:48
Does this answer your question? [How do min-content and max-content work?](https://stackoverflow.com/questions/51285308/how-do-min-content-and-max-content-work) — MaxiGui, Sep 04 '20 at 11:50
Thanks @MaxiGui, the linked answer explained min-content and max-content, but didn't mention anything about min-height/min-width. I would like a more explicit answer about min-height. — Qian, Sep 04 '20 at 18:22
@Qian Did you notice my first comment ? if you set as in your 1st example, the height will be taken if the min-height is lower. But if it is the opposite, the min-height will get the priority on the height. in your case you are telling it to adapt the min height depending of the max-height of what it contains... — MaxiGui, Sep 04 '20 at 18:31

Temani Afif · Accepted Answer · 2020-09-04T20:07:36.890

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

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

score -3 · Answer 2 · answered Sep 04 '20 at 12:05

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.

Without `height: 200px;` I believe it's the default `height: auto;` setting the height to 300px, not `min-height`. — Qian, Sep 04 '20 at 18:19

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

2 Answers2