max-height and min-height css 


<!DOCTYPE html>
<html>

<head>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: #111;
      color: #fff;
      display: grid;
      place-items: center;
      row-gap: 50px;
    }

    .container {
      background: darkgreen;
      color: #fff;
      width: 75vw;
      height: 75vh;
      padding: 10px;
      margin: 0 auto;
    }

    #box {
      max-width: 100%;
      border: 2px solid yellow;
      display: flex;
      flex-direction: column;
      font-size: 20px;
      font-family: sans-serif;
      line-height: 3ex;
      min-height: 150px;
      max-height: 300px;
      overflow: auto;
    }

    h2 {
      text-align: center;
      font-size: 1.4rem;
    }
  </style>
</head>

<body>

  <h2 id="heading">[ min-height || max-height ]</h2>
  <div class="container">
    <div id="box"></div>
  </div>

  <script>
    function fillLines(numberOfLines = 20) {
      const box = document.getElementById('box');
      const heading = document.getElementById('heading');
      box.innerHTML = ''; // clear previous lines

      for (let i = 1; i <= numberOfLines; i++) {
        const line = document.createElement('div');
        line.textContent = `line${i}`; // temporary
        box.appendChild(line);

        // Measure the cumulative content height dynamically
        const currentHeight = Array.from(box.children)
          .reduce((sum, child) => sum + child.offsetHeight, 0);

        line.textContent = `line${i} current height = ${currentHeight}px`;
      }

      // Update heading with min/max/current height
      const styles = window.getComputedStyle(box);
      const totalHeight = Array.from(box.children)
        .reduce((sum, child) => sum + child.offsetHeight, 0);

      heading.textContent = `[ min-height: ${styles.minHeight} || max-height: ${styles.maxHeight} || current: ${totalHeight}px ]`;
    }

    // Fill 10 lines initially
    fillLines(10);

    // Recalculate on window resize
    window.addEventListener('resize', () => fillLines(3));
  </script>

</body>

</html>
Copied!

In this image, we have 3 lines of text, and each line has a height of 30 pixels. We know that 150 pixels is our min-height. Therefore, it creates a yellow border that stretches larger than the height of our text. Even though we only have 3 lines of text with a total height of 90 pixels, it will still display at 150 pixels according to the value of the min-height. The minimum height = min-height is the smallest height and it can't be small than this.

In this image, we have 11 lines of text, but only 10 are displayed because 1 line has overflowed. This happens because our max-height is set to 300 pixels. Therefore, the yellow box can expand to a maximum height of 300 pixels only. Even though we have 11 lines of text with a total height of 330 pixels, it will still display only up to 300 pixels. Remember that max-height = maximum height, which is the largest height allowed.