* {}
.ShellBox {
display:flex;
}
.Shell {
background-color: #0f0;
width: 100px;
display: grid;
}
.Shell1 {
grid-template-rows: 0.1fr;
}
.Shell2 {
grid-template-rows: 0.5fr;
}
.Shell3 {
grid-template-rows: 1fr;
}
.Box {
min-height: 0;
border: 1px solid #f00;
border-top: 0 !important;
}
.Box>div {
height: 99px;
width: 98px;
}<div class="ShellBox">
<div>
<div class="Shell Shell1">
<div class="Box">
<div></div>
</div>
</div>
</div>
<div>
<div class="Shell Shell2">
<div class="Box">
<div></div>
</div>
</div>
</div>
<div>
<div class="Shell Shell3">
<div class="Box">
<div></div>
</div>
</div>
</div>
</div>
<br /><br />
<div class="ShellBox">
<div class="Shell Shell1">
<div class="Box">
<div></div>
</div>
</div>
<div class="Shell Shell2">
<div class="Box">
<div></div>
</div>
</div>
<div class="Shell Shell3">
<div class="Box">
<div></div>
</div>
</div>
</div>The above describes the situation I encountered, and the following describes what I expected. What I don’t understand is why this phenomenon occurs.
grid-template-rows: n fr affected both the parent’s and the child’s height at the same time. Why wasn’t .Shell expanded, but instead, it became the expected height of grid-template-rows: n fr? Then .Box was affected by grid-template-rows: n fr again, resulting in grid-template-rows: n*n fr. I find this phenomenon quite interesting.
=============================
The result in Firefox matches what I expected. I encountered this issue in Google Chrome. Initially, I thought it was a CSS feature, but if it’s caused by browser differences, I’m not sure whether this issue needs to be fixed.
6
I don’t know if you’re confusing fr for percentages, but from the spec:
<flex>values between 0fr and 1fr have a somewhat special behavior: when the sum of the flex factors is less than 1, they will take up less than 100% of the leftover space.A track’s
<flex>value is effectively a request for some proportion of the leftover space, with1frmeaning “100% of the leftover space”; then if the tracks in that axis are requesting more than 100% in total, the requests are rebalanced to keep the same ratio but use up exactly 100% of it. However, if the tracks request less than the full amount (such as three tracks that are each.25fr) then they’ll each get exactly what they request (25% of the leftover space to each, with the final 25% left unfilled).
By default, your grid div is 0px high. Its contents then push it to 100px height. And then you request 50% of that. So that’s what you get.
4