html - Firefox 中嵌套 Flex 容器内的元素溢出

Question

我有一个页面，其中主体是一个列 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 设置的。

Answer 1

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

顺便说一句，我想稍微调整一下 jsFiddle我在问题中找到了flexbox misbehaving with max-height

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>