min-height: max-content;

Hi,
I would like to understand why min-height:max-content does not work in the following example (container2 overflows main when window height is reduced).

I know that a corresponding example in inline direction would work (min-width: max-content), but why doesn't it work in block direction? There is a stackoverflow question about this (https://stackoverflow.com/questions/63740508/what-does-min-height-max-content-mean), but since height:max-content would work as intended for main in the code below, I think it has nothing to do with an "incorrect" calculation of max-content.

Does anyone know why this isn't working?

Thanks in advance

<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        background-color: lightblue;
      }

      main {
        background-color: lightyellow;
        display: flex;
        /* flex-direction: row;  edit - not necessary*/
        height: calc(100vh - 60px);
        min-height: max-content;
        width: 50%;
      }

      #container1 {
        background-color: purple;
        height: 150px;
        width: 80px;
      }

      #container2 {
        background-color: red;
        height: 200px;
        width: 80px;
      }

      #header1 {
        background-color: blue;
        height: 30px;
        width: 100%;
      }

      #footer1 {
        background-color: blue;
        height: 30px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="header1"></div>
    <main>
      <div id="container1"></div>
      <div id="container2"></div>
    </main>
    <div id="footer1"></div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        background-color: lightblue;
      }

      main {
        background-color: lightyellow;
        display: flex;
        /* flex-direction: row;  edit - not necessary*/
        height: calc(100vh - 60px);
        min-height: max-content;
        width: 50%;
      }

      #container1 {
        background-color: purple;
        height: 150px;
        width: 80px;
      }

      #container2 {
        background-color: red;
        height: 200px;
        width: 80px;
      }

      #header1 {
        background-color: blue;
        height: 30px;
        width: 100%;
      }

      #footer1 {
        background-color: blue;
        height: 30px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="header1"></div>
    <main>
      <div id="container1"></div>
      <div id="container2"></div>
    </main>
    <div id="footer1"></div>
  </body>
</html>

Stack Overflow

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

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 50...

briancross•8/15/23, 2:28 AM

I didn’t try running your code but I’d say it’s because your inner divs have a fixed height.

briancross•8/15/23, 2:53 AM

What exactly are you trying to achieve?

briancross•8/15/23, 3:00 AM

Are you wanting to stop shrinking and the body to scroll if the window height is too small?

If so, I added / changed the following CSS:

briancross•8/15/23, 3:08 AM

Also you don’t need as that’s the default with flexbox.

martin__nOP•8/18/23, 7:56 AM

Thank you for your answer. I just tried to understand why min-height:max-content isn't working in the example above.