Issue with the functionality of max-height in a CSS grid container

Question

Issue with the functionality of max-height in a CSS grid container

Update: After receiving clarification from @onkar-ruikar, I realized that my original problem was quite misunderstood. While I still haven't figured out how to properly handle the cyclic dependencies issue, I decided to address it separately. As a result, I have marked this problem as solved and created a follow-up question here: Dealing with cyclic dependencies of percentage sized boxes css (specifically how to get a max-height)

The main issue I'm facing is related to the improper functioning of max-height in grid elements. Essentially, I have a grid element with a flexible size containing an iframe. My goal is to scale the iframe to its full size while ensuring that a surrounding div adapts to the iframe size, with a maximum size equal to the grid element, allowing for scrolling when necessary. However, I am encountering difficulties with the max-height property not behaving as expected. To illustrate this problem, I have created a sample scenario in this jsfiddle:

In the provided code snippet, different outcomes are observed when using "height: 100%;" versus "max-height: 100%;" in #grid1:

#grid0 {
  display: grid;
  grid-template-rows: 50px;
  grid-template-columns: 200px;
  height: 500px;
}

#grid1 {
  height: fit-content;
  max-height: 100%;
  background: blue;
  /* it works using height instead of max-height
  height: 100%;
  */
}

#out {
  height: auto;
  max-height: 100%;
  overflow: hidden;
  background: purple;
  width: 150px;
}

#large {
  height: 100px;
  width: 100px;
  background: red;
}

<div id='grid0'>
  <div id='grid1'>
    <div id='out'>
      <div id='large'>
      </div>
    </div>
  </div>
</div>

By comparing the results between these two approaches, specifically by uncommenting the "height: 100%;" line in the CSS for #grid1, discrepancies can be noted. Interestingly, while inspecting #grid1 in Firefox, the height appears correctly even with max-width set, indicating a rendering inconsistency.

I attempted to introduce an additional container around #out, adjusting its height to auto and max-height to 100%, along with setting #grid1's height to 100% for resolution, suspecting the issue may be related to "fit-content". Unfortunately, this solution did not yield the desired outcome...

If anyone has suggestions or insights on how to overcome this challenge, I would greatly appreciate any input!

css css-grid

Answer 1

Answer №1

In my analysis, the issue is not specifically related to the grid structure. I have observed that the problem can be replicated even when using a normal block element.

#div0 {
  width: 200px;
  height: 50px;
}

#div1 {
  height: fit-content;
  max-height: 100%;
  background: blue;
  /* it works using height instead of max-height
  height: 100%;
  */
}

#out {
  height: auto;
  max-height: 100%;
  overflow: hidden;
  background: purple;
  width: 150px;
}

#large {
  height: 100px;
  width: 100px;
  background: red;
}

<div id='div0'>
  <div id='div1'>
    <div id='out'>
      <div id='large'>
      </div>
    </div>
  </div>
</div>

My reasoning is based on the following specifications:

Percentages specify sizing of a box with respect to the box’s containing block.ref

Intrinsic sizing determines sizes based on the contents of an element, without regard for its context.

This involves using values such as min-content, max-content, and fit-content.

In your scenario, #grid1(blue) behaves as expected by obtaining a height of 50px due to max-height: 100%. The use of height:fit-content does not affect it, as otherwise, blue would have been 100px tall.

The issue arises from the overflow of #out(purple). This happens because the container blue indicates that its height depends on its children (due to fit-content). When you set height:100%, you are indicating that its height relies on container #grid0 rather than #out(purple). When both #grid1(blue) and #out(purple) state their dependence on each other, a cyclic dependency is created.

Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency. When calculating the intrinsic size contribution of such a box (including any calculations for a content-based automatic minimum size), a percentage value that resolves against a size in the same axis as the intrinsic size contribution (a cyclic percentage size) is resolved specially: ref

If the box is non-replaced, then the entire value of any max size property or preferred size property (width/max-width/height/max-height) specified as an expression containing a percentage (such as 10% or calc(10px + 0%)) that is cyclic is treated for the purpose of calculating the box’s intrinsic size contributions only as that property’s initial value. For example, given a box with width: calc(20px + 50%), its max-content contribution is calculated as if its width were auto.

Consequently, percentage heights are treated as auto on purple. Thus, it relies on its children #large for determining its height. As large has a height of 100px, purple also assumes a height of 100px.

You mentioned adding one more container around #out:

#div0 {
  width: 200px;
  height: 50px;
}

#div1 {
  max-height: 100%;
  background: blue;
  /* it works using height instead of max-height*/
  height: 100%;
}

#div2 {
  height: auto;
  /* uncomment following to get desired result */
  /* height: inherit;*/
  max-height: 100%;
}

#out {
  height: auto;
  max-height: 100%;
  overflow: hidden;
  background: purple;
  width: 150px;
}

#large {
  height: 100px;
  width: 100px;
  background: red;
}

<div id='div0'>
  <div id='div1'>
    <div id="div2">
      <div id='out'>
        <div id='large'>
        </div>
      </div>
    </div>
  </div>
</div>

In this code snippet, replacing auto with inherit resolves the issue. Using inherit makes the height dependent on the parent, while auto implies reliance on the children.

Answer 2

In my analysis, the issue is not specifically related to the grid structure. I have observed that the problem can be replicated even when using a normal block element.

#div0 {
  width: 200px;
  height: 50px;
}

#div1 {
  height: fit-content;
  max-height: 100%;
  background: blue;
  /* it works using height instead of max-height
  height: 100%;
  */
}

#out {
  height: auto;
  max-height: 100%;
  overflow: hidden;
  background: purple;
  width: 150px;
}

#large {
  height: 100px;
  width: 100px;
  background: red;
}

<div id='div0'>
  <div id='div1'>
    <div id='out'>
      <div id='large'>
      </div>
    </div>
  </div>
</div>

My reasoning is based on the following specifications:

Percentages specify sizing of a box with respect to the box’s containing block.ref

Intrinsic sizing determines sizes based on the contents of an element, without regard for its context.

This involves using values such as min-content, max-content, and fit-content.

In your scenario, #grid1(blue) behaves as expected by obtaining a height of 50px due to max-height: 100%. The use of height:fit-content does not affect it, as otherwise, blue would have been 100px tall.

The issue arises from the overflow of #out(purple). This happens because the container blue indicates that its height depends on its children (due to fit-content). When you set height:100%, you are indicating that its height relies on container #grid0 rather than #out(purple). When both #grid1(blue) and #out(purple) state their dependence on each other, a cyclic dependency is created.

Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency. When calculating the intrinsic size contribution of such a box (including any calculations for a content-based automatic minimum size), a percentage value that resolves against a size in the same axis as the intrinsic size contribution (a cyclic percentage size) is resolved specially: ref

If the box is non-replaced, then the entire value of any max size property or preferred size property (width/max-width/height/max-height) specified as an expression containing a percentage (such as 10% or calc(10px + 0%)) that is cyclic is treated for the purpose of calculating the box’s intrinsic size contributions only as that property’s initial value. For example, given a box with width: calc(20px + 50%), its max-content contribution is calculated as if its width were auto.

Consequently, percentage heights are treated as auto on purple. Thus, it relies on its children #large for determining its height. As large has a height of 100px, purple also assumes a height of 100px.

You mentioned adding one more container around #out:

#div0 {
  width: 200px;
  height: 50px;
}

#div1 {
  max-height: 100%;
  background: blue;
  /* it works using height instead of max-height*/
  height: 100%;
}

#div2 {
  height: auto;
  /* uncomment following to get desired result */
  /* height: inherit;*/
  max-height: 100%;
}

#out {
  height: auto;
  max-height: 100%;
  overflow: hidden;
  background: purple;
  width: 150px;
}

#large {
  height: 100px;
  width: 100px;
  background: red;
}

<div id='div0'>
  <div id='div1'>
    <div id="div2">
      <div id='out'>
        <div id='large'>
        </div>
      </div>
    </div>
  </div>
</div>

In this code snippet, replacing auto with inherit resolves the issue. Using inherit makes the height dependent on the parent, while auto implies reliance on the children.

Issue with the functionality of max-height in a CSS grid container

Answer №1

Similar questions

Issue with IE7 causing div elements to slide off the screen on specific WordPress pages

Experiencing difficulties replicating two auto-scrolling divs

Using the ternary operator in React to implement inline styles

Access the style of the first script tag using document.getElementsByTagName('script')[0].style or simply refer to the style of the document body with document.body.style

Navigation Bar Dropdown Menu Not Responding to Clicks

What is the reason for needing a page reload in Javascript or JQuery?

Utilize Selenium with Eclipse (Java) to validate the CSS table border style

What is the reason border property does not transition effectively?

Issue with animated SVG failing to display in web browser

ReactJs: difficulty in resetting input field to empty string

CSS clearfix restricted to immediate parent div

How can I modify the color of JavaFX text using CSS?

What is the best way to target CSS only to elements that do not have a parent with a specific class?

Add fresh inline designs to a React high-order component creation

What could be causing my divs to overlap one another?

What is the best way to incorporate a splatter image within an MDX blog post?

Differences between using CSS properties and AngularJS filters:CSS properties

Tips for modifying the font style of a Bootstrap form input using a custom font

Modify the appearance of the username in the header after logging in with Yii

Tips for center-aligning layouts in Angular Material