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

Leveraging the power of CSS id selectors to customize the appearance of a Grid

Step-by-step guide on positioning an image to show at the bottom of a div

Creating a Navigation Bar using the Flexbox property

Fade-in a new, revised text after fading-out the original text in ReactJS

Using React Material UI icon within an auto complete feature

Utilizing JavaScript to implement conditional if-else statements on CSS properties

Dynamic elements create an interactive horizontal scrolling experience

Preserve the height of the previous div following an AJAX request

CSS - selecting elements that are greater than a specific criteria N

Locate the class ID and refine the search results by another class

Maintain the border styling of a radio button when it is in the selected state

Maintain the menu item color even after clicking

Adjust the initial scroll position to - apply overflow-x: scroll - on the specified element

Creating two divs with equal heights in React using Material-UI at 50% each

Which component from the Bootstrap library would be best suited for my needs?

How can the caption be aligned to the right of the image within a Bootstrap thumbnail in a precise manner, while also ensuring the button is positioned at the bottom of the caption?

Issue with styling Icon Menu in material-ui

How to center a responsive image in a container using Bootstrap

What is the best way to line up two forms side by side?

Is it possible to exclusively target a child div using JavaScript in CSS, without affecting the parent div?