Firefox flex - 如何使用flex-direction:column防止弹性项目变得太高

Question

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

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

截图

Chrome(左),Firefox(右)

描述

预期的行为是页眉和页脚始终对用户可见,而内容区域用于overflow-y: auto在需要时滚动其innerContent.问题是Firefox和Internet Explorer允许内容区域增长与其innerContent一样高,而不是保持flex box规格应该是的大小.换句话说,一旦向内容容器添加足够的内容而不是踢动滚动条,内容容器将继续变得更高,然后完全打破布局.

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

Answer 1

尝试添加overflow: auto;到.maindiv

.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>