【发布时间】：2019-02-28 11:04:57
【问题描述】：
如何防止带有滚动条的子 div 和 flex:1 在 Firefox 中超过其父 flexbox 的高度？它在 Chrome 中可以正常工作。
CodePen 链接（如果您更喜欢 Stack Overflow sn-ps）： https://codepen.io/garyapps/pen/ZMNVJg
详情：
我有一个固定高度的弹性容器。它有一个flex-direction:column 设置，它包含多个垂直堆叠的子div。其中一个子 div 具有 flex:1 属性，而其他子 div 具有固定高度。
我的期望是具有flex:1 属性的子 div 将扩展以填充剩余的垂直空间。这按预期工作。
我还给了子 div 一个overflow-y:scroll 属性，这样如果其中的内容超过它的高度，就会出现滚动条。这在 Chrome 中运行良好。然而，在 Firefox 中，这个孩子的身高增加了，超过了它的父 div。
在 Chrome 中：
在 Firefox 中：
正如您在屏幕截图中看到的那样，我有两次出现此问题，一次在左侧面板中，另一次在右侧面板中。在 Chrome 中，子 div 的高度保持不变，出现滚动条，并且不会超出父 div 的高度。在 Firefox 中不会出现滚动条，并且子 div 的高度会增加并超过其父级。
我查看了其他一些关于 SO 的类似问题，并且在许多情况下设置 min-height:0 属性解决了 Firefox 中的问题。但是，我尝试将min-height:0 添加到父母、孩子、父母和孩子，但没有运气。
请在 Chrome 和 Firefox 中运行下面的代码 sn-p 来查看两种浏览器的区别。
如果有任何关于如何防止子 div 增长的建议，我将不胜感激。
（注意使用的是Bootstrap 4，代码sn-p引用了bootstrap 4的.css文件CDN）
代码片段：
.body-content {
height: 300px;
max-height:100%;
border: 3px dashed purple;
display:flex;
flex-direction: column;
}
#messagescontainerrow {
flex: 1;
border: 5px double black;
}
#leftdiv {
display:flex;
flex-direction:column;
border: 1px solid green;
}
#messagetools {
height: 50px;
background-color: cornsilk;
}
#messagelist {
flex:1;
overflow-y: scroll;
background-color:whitesmoke;
}
#rightdiv {
display:flex;
flex-direction:column;
border: 1px solid blue;
}
#messagesenderspane {
width: 100%;
height: 50px;
background-color: lemonchiffon
}
#messagecontents {
flex: 1;
overflow-y: scroll;
width: 100%;
border: 1px solid blue;
background-color: aliceblue;
}
#messagesend {
width: 100%;
height: 70px;
background-color: whitesmoke;
}<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container body-content">
<div class="row" id="messagescontainerrow">
<div class="col-5" id="leftdiv">
<div id="messagetools">
<input type="button" id="newbutton" value="My Button" />
</div>
<div id="messagelist">
<h4>Chat 1</h4>
<h4>Chat 2</h4>
<h4>Chat 3</h4>
<h4>Chat 4</h4>
<h4>Chat 5</h4>
<h4>Chat 6</h4>
<h4>Chat 7</h4>
<h4>Chat 8</h4>
</div>
</div>
<div class="col-7" id="rightdiv">
<div id="messagesenderspane">
Chat 3
</div>
<div id="messagecontents">
<h4>line 1</h4>
<h4>line 2</h4>
<h4>line 3</h4>
<h4>line 4</h4>
<h4>line 5</h4>
<h4>line 6</h4>
<h4>line 7</h4>
</div>
<div id="messagesend">
<textarea id="sendbox"></textarea>
<input type="button" id="sendbutton" value="Send" />
</div>
</div>
</div>
</div>
</body>
</html>【问题讨论】：
标签： css twitter-bootstrap firefox flexbox