Firefox 上的 CSS Flexbox 布局问题 [重复]答案

【问题标题】：CSS Flexbox layout issue on Firefox [duplicate]Firefox 上的 CSS Flexbox 布局问题 [重复]
【发布时间】：2017-09-29 05:06:32
【问题描述】：

我有一个简单的布局，在 Chrome 上运行良好，但似乎不适用于 Firefox，我可以使用一些帮助。这是代码：

<div style="height: 100vh; max-height: 100vh; display: flex;flex-direction: column;" class="wrapper">
  <div style="flex: 1;">
    Top Nav
  </div>
  <div style="flex: 2; display: flex; flex-direction: row;">
    <div style="flex: 1;">
      Side Nav
    </div>
    <div style="flex: 3; overflow: scroll;">
      <div style="height: 1500px;">this should scroll...</div>
    </div>
  </div>
  <div class="footer">
    footer
  </div>

https://plnkr.co/edit/V1Dk9dzEykOQXI3bI1HU?p=preview

在 Firefox 上整个页面滚动，但我只想要 div：

<div style="flex: 3; overflow: scroll;">

作为内容滚动的地方，它在 chrome 上按预期工作，但在 Firefox 上则不然。我究竟做错了什么？

【问题讨论】：

将min-height: 0 添加到主弹性容器的第二个子容器中。
默认情况下，弹性项目不能小于其内容的大小。初始设置为min-height: auto。这将防止弹性项目上的溢出（以及滚动条）。 Firefox 遵循 flexbox 规范的这一部分。 Chrome 显然决定忽略它（我相信它在以前的版本中曾经尊重它）。有关详细信息，请参阅重复的帖子。

标签： html css firefox flexbox

【解决方案1】：

看起来“顶部导航”下的元素需要隐藏溢出。

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style>
      body, html {
            padding: 0;
            margin: 0;
        }
    </style>
  </head>

  <body>
    <div style="height: 100vh; max-height: 100vh; display: flex;flex-direction: column;" class="wrapper">
      <div style="flex: 1;">
        Top Nav
      </div>
      <div style="flex: 2; display: flex; flex-direction: row; overflow: hidden;">
        <div style="flex: 1;">
          Side Nav
        </div>
        <div style="flex: 3; overflow: scroll;">
          <div style="height: 1500px;">this should scroll...</div>
        </div>
      </div>
      <div class="footer">
        footer
      </div>
    </div>
  </body>
</html>

【讨论】：

这似乎解决了问题，知道为什么需要这样做吗？
@csyperski 这似乎是某种错误。我通过反复试验解决了这个问题，但只是四处搜索，看起来要么overflow 可以工作，要么使用min-height: 0（或min-width: 0，如果它是一个带有水平溢出的弹性行）。 stackoverflow.com/questions/28636832/…

【解决方案2】：

您可以将min-height: 0; 添加到中间 div（顶部导航和页脚之间）。

body {
  margin: 0;
}

<div style="height: 100vh; max-height: 100vh; display: flex;flex-direction: column;" class="wrapper">
  <div style="flex: 1;">
    Top Nav
  </div>
  <div style="flex: 2; min-height: 0; display: flex; flex-direction: row;">
    <div style="flex: 1;">
      Side Nav
    </div>
    <div style="flex: 3; overflow: scroll;">
      <div style="height: 1500px;">This should scroll...</div>
    </div>
  </div>
  <div class="footer">
    Footer
  </div>

4.5. Implied Minimum Size of Flex Items

为了为弹性项目提供更合理的默认最小尺寸，本规范引入了一个新的auto 值作为CSS 2.1 中定义的min-width 和min-height 属性的初始值。

Chrome 还没有完全实现，但 Firefox 已经实现了。关注这个 Chromium bug 了解更多详情。

【讨论】：