Firefox flex - 如何防止弹性项目因弹性方向而变得太高：列

Question

我一直致力于flex布局，遇到了针对Firefox和IE11的问题。

我创建了一个codepen来展示问题。

截图

Chrome（左），Firefox（右）

描述

预期的行为是标题，页脚始终对用户可见，内容区域使用overflow-y: auto滚动其内部内容如果需要的话。问题是 Firefox 和 Internet Explorer 允许内容区域增长到与其内部内容一样高，而不是保持灵活盒规格说它应该是。换句话说，一旦向内容容器添加足够的内容而不是踢动滚动条，内容容器将继续变高，然后完全打破布局。

• 我知道对内容容器使用显式高度是一种解决方法，但它不是我们的首选或有效解决方案。
• 由于我们的布局具有灵活性，我们不能只使用像百分比这样的东西。

Answer 1

尝试将overflow: auto;添加到.main div

.container .innerContainer .main {
    background-color: #A3845D;
    flex-grow: 1;
    display: flex;
    overflow: auto; /*<< added */
}

在我的FF版本（59.0.2）上工作正常，目前无法在IE中查看。

Answer 2

通知 - Fecosos给出了正确的答案，并在很长一段时间内击败了我。我会留下我的代码，因为它删除了很多不必要的东西。

为屠杀您的代码而道歉但这似乎适用于FF和Chrome。不知道IE。 （我记得Safari给了我最多的问题，但我忘记了是否有这个特定的问题。）

注意 - 我从一个应用程序复制了这个代码，我遇到了类似的问题而且我从来没有弄清楚为什么会出现这个问题，我记得只是尝试和错误处理不同的事情，直到我得到了有用的东西。

<强>笔

https://codepen.io/nooble/pen/GxXyzb

<强>码

var rightPanel = document.getElementById("rightPanel");
for(var loop = 0; loop < 50; loop++) {
    var contentNode = document.createElement("div");
    contentNode.className = "content";
    contentNode.innerText = "Content";
    rightPanel.appendChild(contentNode);
}

* { 
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: "Roboto";
}
body {
  height: 100vh;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.main {
  display: flex;
  overflow-y: auto; /* this is important */
}
.left {
  flex: 1;
  max-width: 100px;
}
.right {
  flex: 2;
  width: 100%;
  overflow-y: auto; /* this is important */
}
/* unnecessary styling stuff below */
body { background-color: grey; } .header { background-color: red; } .navigator { background-color: #5E6074; } .main { background-color: #A3845D; } .left {	background-color: #808080; } .right { background-color: #78AB86; } .content { background-color: #406C98; } .footer { background-color: green; }

<div class="container">
  <div class="header">Header</div>
  <div class="navigator">Navigator</div>
  <div class="main">
    <div class="left">Left</div>
    <div class="right" id="rightPanel">    </div>
  </div>
  <div class="footer">Footer</div>
</div>