1

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

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

我通过顿悟获得的结果是第一个块比后面的 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>

4

1 回答 1

1

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

如此链接中所述： 为什么百分比高度不适用于我的 div？

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

也就是说，我注意到在开发模式下，flex 项目的高度被正确拉伸，而该.box项目无法使用该height属性进行拉伸。正如这个答案中所建议的：Chrome / Safari not fill 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;
}

这是我必须做出的改变。

于 2017-12-30T01:43:33.870 回答