Question

我有一个块网格，其中的块也包含在flex块中。</ p>

我遇到的问题是在顿悟中网格的flex项的子节点中忽略高度。它似乎与firefox和chrome正确显示。

我通过顿悟获得的结果是第一个块比后面的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的草稿。这可以解释为什么它适用于铬和火狐。

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

百分比高度试图获取父节点的高度，该高度设置为默认值...但高度由flexbox布局控制。我的猜测是，flexbox布局是错误的，并且没有正确地将高度中继到子元素，这使得相对高度失败。例如，如果我将固定高度设置为父元素，它将正常工作，因为flexlayout将使用固定高度。

也就是说，我在开发模式下注意到，.box项目无法使用height属性拉伸时，Flex项目的高度被正确拉伸。正如在这个答案中所建议的那样：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;
}

以下是我必须做出的改变。

Flex无法使用Epiphany将子项的高度调整到Flex项的高度

1 个答案: