Flex 无法使用 Epiphany 将子项的高度变为 flex 项的高度

Question

我有一个块网格，其中其他块也包含在弹性块中。

我遇到的问题是在顿悟中网格的弹性项目的子项中忽略了高度。它似乎可以在 firefox 和 chromium 中正确显示。

我通过顿悟获得的结果是第一个块比后面的 2 个块长。在 firefox 和 chrome 上，所有块在第一行具有相同的高度，并在必要时在每一行上相应地扩展。

.container {
  width: 20rem;
  height: 20rem;
  overflow: auto;
}

.b2 {
  height: 100%;
  background: pink;
}

.widgets {
  display: -webkit-flex;
  -webkit-flex-direction: row;
  -webkit-flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

.widget {
  margin: 1rem;
}

.box {
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -webkit-justify-content: space-between;
  background: grey;
  width: 4rem;
  height: 100%;
  overflow: hidden;
}

.r1 {
  padding: 0.25rem;
}
.r2 {
  padding: 0.25rem;
  background: red;
  color: white;
}

<div class="container">
<div class="widgets">
  <div class="widget">
    <div class="box">
      <div class="r1">
      asdasdasdasd akjsdha ksjdh askjdh askjdh asd
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="b2">
    
    
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
</div>
</div>

Answer 1

好的，感谢 Micheal_B，我找到了问题所在。问题是我添加了一个不是 flexbox 的额外容器。在较新的浏览器中似乎可以正确处理。我猜这是未完成的 flexbox 规范中的一个错误。由于我的顿悟浏览器只允许 -webkit 前缀版本的 flex 我相信它是基于 flexbox 的草稿。这可以解释为什么它适用于 chromium 和 firefox。

如此链接中所述： Why is percentage height not working on my div?

百分比高度试图获取设置为默认值的父节点的高度......但高度由弹性盒布局控制。我的猜测是 flexbox 布局有问题，并且没有正确地将高度传递给子元素，这导致相对高度失败。例如，如果我为父元素设置了固定高度，它会正常工作，因为 flexlayout 将使用固定高度。

也就是说，我注意到在开发模式下，flex 项目的高度已正确拉伸，而 .box 项目无法使用 height 属性进行拉伸。正如这个答案所建议的那样：Chrome / Safari not filling 100% height of flex parent

使用 flexlayout 一路走好。这就是使这个 html 工作正常的原因。我所要做的就是使.widget 对象成为一个flexbox，这将需要子元素在其中拉伸并删除所有高度css 属性。那么浏览器将只依赖 flex 布局来设置高度，除了在 css 中定义的固定高度。

.widget {
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -webkit-flex-grow: 1;
  -webkit-flex-basis: 1 ;
  -webkit-align-items: stretch;
  margin: 1rem;
}

.box {
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -webkit-justify-content: space-between;
  background: grey;
  width: 4rem;
  overflow: hidden;
}

这是我必须做出的改变。