Question

请考虑以下三重嵌套div。有一个flexbox包含一个flex: 1的孩子，而又包含一个height: 100%的孩子。

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: red;
}

.body {
  background-color: blue;
  flex: 1;
}

.inner {
  background-color: yellow;
  height: 100%;
}

<div class="container">
  <div class="body">
    <div class="inner">
      
    </div>
  </div>
</div>

如果您在Chrome中减小窗口的大小，则会出现一个垂直滚动条。在Firefox中不会发生这种情况。调整包含它的元素的大小时，Chrome似乎无法重新计算100％的高度。

这是Chrome中的错误吗？可以在无法更改标记且必须使用flexbox的限制下以某种方式解决此问题吗？

Answer 1

这似乎是一个Chrome错误，因为打开开发工具并禁用/重新启用flex: 1即可解决。我发现在您的overflow: hidden中添加.body可以解决问题（至少在我的JSFiddle中）。希望对您有帮助。

https://jsfiddle.net/a89ksz4d/

在Chrome中调整flexbox的大小时避免使用滚动条？

1 个答案: