Flex 奇怪地计算宽度，而网格不计算宽度

Question

这里唯一的区别是父树，子树的样式完全相同。

Grid 正确计算第一个元素的宽度（带有绿色轮廓的

section

），但 flex 将其设置为 0 并允许溢出（蓝色圆圈

div

）。在

overflow

上使用

flex-shrink

或

section

没有帮助。

这是代码：

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>

我所期待的

1. aside

   的高度被视为

   main

   的高度（有效）

2. main

   的高度用作

   section

   的高度，因为弹性/网格（它有效）

3. section

   的高度被用作

   div

   的高度，因为

   height: 100%

   （它的工作原理：您可以通过取消选中复选框进行检查 - 如果未设置高度，

   div

   的大小将更改为0并且圆圈消失）

4. div

   的高度用作

   div

   的宽度，因为

   aspect-ratio: 1

   （它的工作原理：div可见为圆形）
5. div

   的宽度会反弹为

   section

   的宽度，因为

   div

   在

   section

   内处于正常流动状态（在

   grid

   中有效，但在

   flex

   中无效：绿色框架折叠为0宽度）周围的蓝色圆圈就像网格中一样）

6. section

   的宽度重新计算弹性/网格布局并移至其右侧（适用于

   grid

   ）

问题

在此示例中，

flex

 和 

grid

 的行为是否应该相同？

我是否误解了它应该如何与
flex

一起工作？

有没有办法让
flex

表现得像这里的

grid

？

Answer 1

本质上，当结合 Flexbox 和

aspect-ratio

需要定义/可计算的高度。 100%

 在您的原始实例中不起作用，因为没有原始高度。 100% 什么？

相反，给父级高度。

main {
  margin-top: .5em;
}

.flex {
  display: flex;
  height: 75px;
}

.grid {
  display: grid;
  height: 75px;
  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 {
  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>