Kevin Powell - Community•11mo ago

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

2 Replies

briancross•11mo ago

I didn’t try running your code but I’d say it’s because your inner divs have a fixed height. What exactly are you trying to achieve? Are you wanting main to stop shrinking and the body to scroll if the window height is too small? If so, I added / changed the following CSS:

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

main {
  background-color: lightyellow;
  display: flex;
  flex-direction: row;
  /* Removed the following 2 rules */
  /* height: calc(100vh - 60px); */
  /* min-height: max-content; */
  width: 50%;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

main {
  background-color: lightyellow;
  display: flex;
  flex-direction: row;
  /* Removed the following 2 rules */
  /* height: calc(100vh - 60px); */
  /* min-height: max-content; */
  width: 50%;
}

Also you don’t need flex-direction: row as that’s the default with flexbox.

martin__n•10mo ago

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

Gaming

Programming

min-height: max-content;