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

【问题标题】：Firefox flex - How to prevent flex items from growing too tall with flex-direction: columnFirefox flex - 如何使用 flex-direction: column 防止 flex 项目变得太高
【发布时间】：2018-04-10 10:19:52
【问题描述】：

我一直在研究 flex 布局，但遇到了针对 Firefox 和 IE11 的问题。

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

截图

Chrome（左）、Firefox（右）

说明

预期的行为是 header 和 footer 始终对用户可见，并且 Content 区域在需要时使用overflow-y: auto 滚动其内部内容.问题是 Firefox 和 Internet Explorer 允许内容区域增长到与其 innerContent 一样高，而不是停留在尺寸弹性盒规范说它应该是。换句话说，一旦向内容容器添加了足够多的内容，而不是踢滚动条，内容容器就会不断变高，然后完全破坏布局。

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

【问题讨论】：

不是一个答案，而是未来给其他人的提示 - 您可以通过将 flex-direction: column; 保留为默认值（行）、添加 flex-wrap 并使子代@987654327 来避免一些问题@jsfiddle.net/Hastig/614hkcsm
Hastig，很有趣，我会尝试不断更新你的技巧。
@Hastig Zusammenstellen 我只是尝试使用 row、wrap 和 100% width，似乎不适用于这种情况.无论如何，您的想法可能对其他人有用:)

标签： css flexbox

【解决方案1】：

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

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

在我的 FF (59.0.2) 版本上运行良好，目前无法签入 IE。

【讨论】：

这个答案确实节省了我很多时间，实际上，我尝试了几天来解决它。这适用于我的 Firefox 59.0.2，稍后我将使用 IE11 进行验证并在此处保持更新。
Internet Explorer 11(11.0.9600.17843) 和 Safari 11.1(13605.1.33.1.2) 都可以正常工作。
这很荒谬，但即使“.main”没有获得滚动条但它的兄弟姐妹之一应该/可以，这实际上也有效。
这修复了高度问题，但它会导致容器内发生滚动。无论如何要使 flex 容器的高度与其中的 flex 项的高度相匹配，但是没有有滚动条？

【解决方案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>

【讨论】：

很好的清理工作，感谢您的积极性。
感谢您的努力，非常积极。