1

I have the following code:

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  padding: 10px;
}

body {
  position: relative;
}

#outer {
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid green;
  padding: 5px;
  max-width: 100%;
  max-height: 100%;
}

#inner {
  border: 2px solid red;
  font-size: 5em;
  overflow: auto;
  height: 100%;
}
<html>

<body>
  <div id="outer">
    <div id="inner">
      This is a loooooooonnnng<br>text.<br> Spanning
      <br>multiple<br>lines.
    </div>
  </div>
</body>

</html>

Resize the browser window and you can see that the inner div is expanding more than the outer div in height. But, if I specify a height, say height: 1000px; on the outer div, the inner div gets resized to fit outer div's height. Why is it behaving like that? Isn't max-height supposed to work without specifying a height?

Puspam
  • 2,137
  • 2
  • 12
  • 35
  • I am not sure if I got the question right ... testing your code with `#inner{height:1000px}` does not resize (= does not change the behavior of) the inner div. `#inner` still takes the height it needed as the inner content is long and don't grow up to a heigher outer div. – Brebber Feb 28 '21 at 07:15
  • Thanks for notifying. I have missed a line in the CSS code (`height: 100%`). See my edit. – Puspam Feb 28 '21 at 07:27
  • 1
    percentage height need height as reference and not max-height – Temani Afif Feb 28 '21 at 07:48
  • 1
    for your particular case, remove height:100% and use display:flex on the outer – Temani Afif Feb 28 '21 at 07:49

2 Answers2

1

The max-height property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.

When you use max-height: 100% on the parent container, the percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly, and this element is not absolutely positioned, the percentage value is treated as none.

In terms of max-height, if the content is larger than the maximum height, it will overflow.

To allow the child container to always fit inside the parent container, you can just use CSS Flexbox or add overflow: auto to #outer so then it does fit 100% of the content within it's content-box. Without using either overflow or Flexbox, the child container's content is larger than the maximum height and therefore overflows out the bottom of #outer when the viewport height is small.

Removing the height: 100% declaration from #inner while making the parent container a Flexbox with display: flex seems to do the trick without having to add overflow: auto to #outer.

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  padding: 10px;
}

body {
  position: relative;
}

#outer {
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid green;
  padding: 5px;
  max-width: 100%;
  max-height: 100%;
  display: flex;
}

#inner {
  border: 2px solid red;
  font-size: 5em;
  overflow: auto;
}
<html>

<body>
  <div id="outer">
    <div id="inner">
      This is a loooooooonnnng<br>text.<br> Spanning
      <br>multiple<br>lines.
    </div>
  </div>
</body>

</html>
Tanner Dolby
  • 4,253
  • 3
  • 10
  • 21
-1

Simply remove the max-height declaration from the #outer div.

To fix your issue, supply a height property to your #outer div.

#outer {
  /* ... */
  height: 100%;
}
steven7mwesigwa
  • 5,701
  • 3
  • 20
  • 34