martin__n Posts - Answer Overflow

martin__n

•Created by martin__n on 8/14/2023 in #front-end

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>

6 replies

Gaming

Programming