html - flex 无法通过 Epiphany 获取子项的高度为 flex 项的高度

Question

我有一个 block 网格，其中其他 block 也包含在 flex block 中。

我遇到的问题是，顿悟中网格的 flex 元素的子项的高度被忽略了。它似乎可以在 Firefox 和 Chromium 中正确显示。

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

.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 布局控制。我的猜测是 flexbox 布局有问题并且没有将高度正确地传递给子元素，这使得相对高度失败。例如，如果我为父元素设置固定高度，它将正常工作，因为 flexlayout 将使用固定高度。

也就是说，我注意到在开发模式下， flex 元素的高度被正确拉伸(stretch)，而 .box 元素无法使用 height 属性拉伸(stretch)。正如此答案中所建议的那样:Chrome / Safari not filling 100% height of flex parent

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

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

这是我必须做出的改变。