The only difference here is parent, styles of subtree are completely the same.

Grid calculates the width of first element (section with green outline) correctly, but flex sets it to 0 and allows overflow (blue circle div). Playing with overflow or flex-shrink on section doesn't help.

Here is the code:

main {  margin-top: .5em;}.flex {  display: flex;}.grid {  display: grid;  grid-template-columns: auto auto 1fr;}section {  outline: 1px solid green;}div {  background: blue;  border-radius: 50%;  aspect-ratio: 1;}#height:checked ~ main div {  height: 100%;}aside {  height: 75px;  background: #F00A;}

<input type="checkbox" id="height" checked="checked"><main class="flex"><section><div></div></section><aside>aside</aside></main><main class="grid"><section><div></div></section><aside>aside</aside></main>

What I expect

1. Height of aside is taken as a height of main (it works)
2. Height of main is used as height of section because of flex/grid (it works)
3. Height of section is used as height of div because of height: 100% (it works: you can check by unchecking checkbox - size of div changes to 0 and circle disappears if height is not set)
4. Height of div is used as width of div because of aspect-ratio: 1 (it works: div is visible as a circle)
5. Width of div bounces back as width of section because div is in normal flow inside of the section (works with grid in Chrome but not in FF; never works with flex: green frame is collapsed to 0 width insted of surrounding blue circle like in grid)
6. Width of section recalculates flex/grid layout and aside shifts to the right of it (works in grid)

Questions

Should flex and grid behave the same way in this example?
Do I misunderstand how it should work with flex?
Is there a way to make flex behave like grid here?

I found out that in FF grid works the same way as flex - that means either FF or Chrome is wrong in calculating grid - who of them and why?

About "100% of what?"

It's ok to specify height in percents for subchildren of horizontal flex: https://jsfiddle.net/w3m7Ldrk/

main {  display: flex;  gap: 1em;  outline: 1px dotted red;}div {  background: blue;  width: 3em;}

<main><section><div style="height:25%"></div></section><section><div style="height:50%"></div></section><section><div style="height:75%"></div></section><section><div style="height:100%"></div></section><aside>1<br>2<br>3<br>4</aside><section><div style="height:150%"></div></section></main>

Also in original example blue circle does definetely have height of section (green outline) only when checkbox is checked, so height: 100% works fine. That means, regardless specifying height on section solves the problem, lack of specific height on it can't be an answer about why it behaves like that.