Css Firefox flex-如何防止flex项目在flex direction:column中变得太高

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

我已经创建了一个来显示问题

屏幕截图

Chrome（左）、Firefox（右）

说明

预期的行为是，页眉和页脚始终对用户可见，内容区域使用

overflow-y:auto

滚动其内部内容（如果需要）。问题是Firefox和Internet Explorer允许内容区域与其内部内容一样高，而不是保持flex box规范规定的大小。换句话说，一旦向内容容器中添加足够的内容而不是踢滚动条，内容容器就会不断变高，然后完全破坏布局

• 我知道为内容容器使用显式高度是一种变通方法，但对我们来说，这不是一个更可取或有效的解决方案
• 由于我们的布局是灵活的，我们不能只使用百分比之类的东西

---

尝试添加

溢出：自动

到

.main

div

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

.container.innerContainer.main{
背景色：#A3845D；
柔性生长：1；
显示器：flex；
溢出：auto；/*注意-Fecosos给出了正确的答案，并在很长一段时间内击败了我。我将放弃我的代码，因为它会去除很多不必要的东西


很抱歉破坏了您的代码，但这似乎在FF和Chrome中起作用。不知道IE（我记得Safari给了我最多的问题，但我忘记了它是否与此特定问题有关。）

注意-我从一个我遇到类似问题的应用程序中复制了这段代码，但我从未弄清楚问题存在的原因，我只记得尝试和出错不同的事情，直到我得到了一些有效的东西

笔


代码


var rightPanel=document.getElementById（“rightPanel”）；
用于（var loop=0；loop<50；loop++）{
var contentNode=document.createElement（“div”）；
contentNode.className=“content”；
contentNode.innerText=“Content”；
appendChild（contentNode）；
}
*{
保证金：0；
填充：0；
文本对齐：居中；
字体系列：“机器人”；
}
身体{
高度：100vh；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
梅因先生{
显示器：flex；
overflow-y:auto；/*这很重要*/
}
.左{
弹性：1；
最大宽度：100px；
}
.对{
弹性：2；
宽度：100%；
overflow-y:auto；/*这很重要*/
}
/*下面是不必要的样式*/
正文{背景色：灰色；}。页眉{背景色：红色；}。导航器{背景色：#5E6074；}。主{背景色：#A3845D；}。左{背景色：#808080；}。右{背景色：#78AB86；}。内容{背景色：#406C98；}。页脚{背景色：绿色；}

标题
领航员
左边
页脚
不是答案，而是将来给其他人的提示-您可以通过将其保留为默认值（行）来避免
弹性方向：列；
的一些问题，添加flex wrap并使孩子们
width:100%；
Hasting，很有趣，我会尝试更新你的技巧。@Hasting Zusammenstellen我只是尝试使用row，wrap和100%width，似乎不适用于这种情况。无论如何，你的想法可能对其他人有用：）清理工作做得很好，谢谢你的积极性。谢谢你的建议努力，非常积极。这个答案真的节省了我很多时间，事实上，我花了几天时间试图解决它。这对我的Firefox 59.0.2有效，我稍后将使用IE11进行验证，并在这里保持更新。Internet Explorer 11（11.0.9600.17843）和Safari 11.1（13605.1.33.1.2）都可以正常工作。这很荒谬，但即使“.main”也可以正常工作未获取滚动条，但它的一个同级应该/有。这修复了高度问题，但会导致容器内出现滚动。是否要使flex容器的高度与其中flex项目的高度匹配，但不具有滚动条？