Problem with max-height not working in css grid element [duplicate] - css

Question

This question already has an answer here:
Why does height: 100% on a child element not apply when the parent element has a min-height/max-height value but no height value?
(1 answer)
Closed 1 year ago.
Edit: I misunderstood my problem quite a bit, as #onkar-ruikar explained below. I still don't know exactly how to handle the consequences of the cyclic dependencies in a way which really works for me, but I would have had to completely rewrite my question here, so I'm treating both as separate problems, marked this one as solved and asked a follow up to it: Dealing with cyclic dependencies of percentage sized boxes css (specifically how to get a max-height)
I have a problem with max-height not working properly in grid elements. Basically I have a grid element with flexible size, and within it I am showing an iframe. I want to scale the iframe to its full size, and have a surrounding div which fits to the iframe size, with a maximum size equal to the grid element, and from there scroll. My problem is, that max-height somehow does not work properly. I prepared a jsfiddle for this:
For this code I get different results for using "height: 100%;" or "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>
Compare the results between this and commenting in the "height: 100%;"-line in the css for #grid1. Interestingly when inspecting #grid1 with firefox its height gets shown as it should be even with max-width, but clearly it is not rendered this way.
I tried to introduce another container around #out, set its height to auto and max-height to 100% and #grid1's height to 100% fix, because I thought it might be the "fit-content", but it did not work either...
Does anyone have suggestions how to get around this, or am I doing something wrong?
I would be happy about every hint!

Answer 1

I think the issue not actually related to the grid. I can reproduce it using normal block element as well.
#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 explanation is based on following specs:
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.
That is using min-content, max-content, and fit-content values.
In your case #grid1(blue) is working as expected it is getting 50px height because of max-height: 100%. height:fit-content has no effect, if it did then blue would be 100px high.
The problem is that #out(purple) is overflowing. It is because the container blue is saying my height is dependent on my children(because of fit-content). When you set height:100% you say it's height is dependent on container #grid0 and not #out(purple). When both #grid1(blue) and #out(purple) purple say they depend on each other then it creates a cyclic dependency.
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.
That means percentage heights are treated as auto on purple. So it relies on it's children #large for height. As large has 100px height purple gets 100px height as well.
You said you added 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 if you use inherit instead of auto it fixes the issue. Inherit makes it dependent on parent and auto on children.