Firefox 中嵌套 flex 容器内的项目溢出答案

【问题标题】：Overflow of item inside nested flex containers in FirefoxFirefox 中嵌套 flex 容器内的项目溢出
【发布时间】：2017-01-27 19:00:32
【问题描述】：

我有一个页面，其中正文是列 flex 容器，中间有页眉、页脚和主容器。这个主容器也是一个 flex 容器，这次是排成一行的，有两个并排的 div。在左侧的div 中将有一个svg container。它的尺寸将由 jQuery 设置以适应可用空间。右侧的 div 将接收可变长度的文本。我需要svg 保持在屏幕上而不移动，所以如果内容太多，我希望右侧的 div 滚动。

这是我的代码：

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}
body {
  text-align: center;
  display: flex;
  flex-direction: column;
  max-height: 100%;
}
#top {
  background-color: #005200;
  color: white;
}
#bottom {
  background-color: #BC0203;
  color: white;
}
#middle {
  flex-grow: 2;
  background-color: #FD9800;
  display: flex;
  flex-direction: row;
}
#left {
  width: 50%;
  border-right: 1px solid black;
}
#right {
  width: 50%;
  overflow-y: auto;
}

<div id="top">
  <h1>If you're the big tree</h1>
</div>
<div id="middle">
  <div id="left">
    We are the small axe
    <!--SVG will go here -->
  </div>
  <div id="right">
    <p>
      Ready
      <br>
      <br>
      <br>
      <br>to
      <br>
      <br>
      <br>
      <br>cut
      <br>
      <br>
      <br>
      <br>you
      <br>
      <br>
      <br>
      <br>down
    </p>
  </div>
</div>
<div id="bottom"><em>To cut you down</em>
</div>

我可以让中间的container 滚动，但不能滚动右边的项目。我想这是因为我不能给中间的container 一个最大值height，因为它是由flex 设置的。

【问题讨论】：

您可以添加 de SVG 以便我们查看您的问题吗？
其实……这段代码不就是按照你的要求做的吗？
至少不在 Firefox 50.1.0 中。当我降低浏览器窗口的高度时，主体溢出并显示滚动条。但我想要的是#right 溢出并显示滚动条，同时保留所有其他元素。
我明白了……虽然 Chrome 的工作方式很有魅力
确实如此，我没有检查过。我改一下标题。

标签： html css flexbox

【解决方案1】：

我可以将overflow-y: auto; 添加到您的#middle 元素中来解决它。似乎 flex 没有考虑到 Firefox 的 max-height: 100%。如果你删除它没有任何区别。

顺便说一句，我在问题flexbox misbehaving with max-height 中发现了jsFiddle 的想法

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}
body {
  text-align: center;
  display: flex;
  flex-direction: column;
}
#top {
  background-color: #005200;
  color: white;
}
#bottom {
  background-color: #BC0203;
  color: white;
}
#middle {
  flex-grow: 2;
  background-color: #FD9800;
  display: flex;
  flex-direction: row;
  overflow-y: auto;
}
#left {
  width: 50%;
  border-right: 1px solid black;
}
#right {
  width: 50%;
  overflow-y: auto;
}

<div id="top">
  <h1>If you're the big tree</h1>
</div>
<div id="middle">
  <div id="left">
    We are the small axe
    <!--SVG will go here -->
  </div>
  <div id="right">
    <p>
      Ready
      <br>
      <br>
      <br>
      <br>to
      <br>
      <br>
      <br>
      <br>cut
      <br>
      <br>
      <br>
      <br>you
      <br>
      <br>
      <br>
      <br>down
    </p>
  </div>
</div>
<div id="bottom"><em>To cut you down</em>
</div>

【讨论】：