Flex странно вычисляет ширину, а сетка этого не делает ⇐ CSS

[Anonymous]

Единственное отличие здесь — родительский элемент, стили поддерева полностью одинаковы.
Grid вычисляет ширину первого элемента (

Код: Выделить всё

section

с зеленым контуром) правильно, но flex устанавливает для него значение 0 и допускает переполнение (синий кружок div). Игра с переполнением или гибким сжатием в разделе не помогает.
[img]https:/ /i.sstatic.net/pzPdGiEf.png[/img]

Вот код:

Код: Выделить всё

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;
}

Код: Выделить всё

aside






aside

Чего я ожидаю

• Высота сбоку принимается как высота основного (работает)
• Высота основного используется как высота раздела из-за гибкости/сетки (работает)
• Высота раздела используется как высота div из-за высоты: 100%< /code> (работает: вы можете проверить, сняв флажок - размер div изменится на 0, а круг исчезнет, ​​если высота не установлена)
• Высота div > используется в качестве ширины div из-за соотношения сторон: 1 (работает: div отображается как круг)
• Ширина div возвращается к ширине раздела, потому что div находится в нормальном потоке внутри раздела (работает с сеткой в Chrome, но не в FF; никогда не работает с flex) code>: зеленая рамка сворачивается до ширины 0 вместо окружающего ее синего круга, как в сетке)
• Ширина раздела пересчитывает гибкий макет/сетку и смещается вправо от него (работает в сетке)

Вопросы
Должны быть гибкими и сеткой в этом примере ведет себя так же?

Я неправильно понимаю, как он должен работать с flex?

Есть ли способ сделать flex вести себя как сетка здесь?
Я обнаружил, что в FF сетка работает так же, как и flex - это означает, что либо FF, либо Chrome ошибся в расчете сетки - кто из них и почему?
О "100% чего?"
Можно указать высоту в процентах для дочерних элементов горизонтального изгиба: https://jsfiddle.net/w3m7Ldrk/

Код: Выделить всё

main {
display: flex;
gap: 1em;
outline: 1px dotted red;
}

div {
background: blue;
width: 3em;
}

Код: Выделить всё

1
2
3
4

Кроме того, в исходном примере синий круг определенно имеет высоту сечения > (зеленый контур) только тогда, когда флажок установлен, поэтому высота: 100% работает нормально. Это означает, что независимо от того, что указание высоты в разделе решает проблему, отсутствие определенной высоты не может быть ответом на вопрос, почему он ведет себя таким образом.

Подробнее здесь: https://stackoverflow.com/questions/791 ... rid-doesnt