如何解决CSS flex 溢出-y Firefox 错误
我正在尝试让 2 个垂直的 flex 容器填满屏幕并且都可以滚动。我可以让它在 chrome 中正常工作，但 Firefox 失败了。当内容被动态插入时，它的容器会扩展以适应内容，而不是保持弯曲并显示滚动条。要查看问题，请在 chrome vs firefox 中打开此 jsfiddle，然后单击 fill top 按钮。
https://jsfiddle.net/np6jgs45/4/
<!DOCTYPE html>
<html>
<head>
<title>Parcel SandBox</title>
<Meta charset="UTF-8" />
<script>
function fillit() {
document.getElementById('tophalf').innerHTML = "shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>";
}
</script>
</head>
<body style="margin: 0; padding: 0;">
<div style="height: 100vh; display: flex; flex-direction: column;">
<div style="padding: 20px; background-color: gray;">header</div>
<div style="flex: 1; display: flex; flex-direction: row;">
<nav style="background-color: rgb(238,238,198); width: 200px;">
menu<br />
<button onClick="fillit()">fill top</button>
</nav>
<div style="flex: 1; display: flex; flex-direction: column;">
<div
style="
flex: 1;
display: flex;
background: repeating-linear-gradient(
45deg,#f7f7f7,#f7f7f7 10px,#f1f1f1 10px,#f1f1f1 20px
);
align-items: center;
flex-direction: column;
"
>
<div
style="
flex: 1;
width: 600px;
display: flex;
position: relative;
max-width: 100%;
flex-direction: column;
height: 0px;
"
>
<div
id="tophalf"
style="
flex: 1;
overflow-y: auto;
background-color: rgba(250,158,0.521);
"
></div>
<div
style="
flex: 1;
overflow-y: auto;
background-color: rgba(144,243,144,0.555);
"
></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
解决方法
您可以做的就是将 height: 50%; 添加到上半部分和下半部分 div，然后将包含 div 的高度从 0 更改为 max-height: 90vh;，它应该可以在 Firefox 中工作。
如果你想玩弄它，这是小提琴：https://jsfiddle.net/9h7z4udy/
看这里：
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<script>
function fillit() {
document.getElementById('tophalf').innerHTML = "shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>";
}
</script>
</head>
<body style="margin: 0; padding: 0;">
<div style="height: 100vh; display: flex; flex-direction: column;">
<div style="padding: 20px; background-color: gray;">header</div>
<div style="flex: 1; display: flex; flex-direction: row;">
<nav style="background-color: rgb(238,238,198); width: 200px;">
menu<br />
<button onClick="fillit()">fill top</button>
</nav>
<div style="flex: 1; display: flex; flex-direction: column;">
<div
style="
flex: 1;
display: flex;
background: repeating-linear-gradient(
45deg,#f7f7f7,#f7f7f7 10px,#f1f1f1 10px,#f1f1f1 20px
);
align-items: center;
flex-direction: column;
"
>
<div
style="
flex: 1;
width: 600px;
display: flex;
position: relative;
max-width: 100%;
flex-direction: column;
max-height: 90vh;
"
>
<div
id="tophalf"
style="
flex: 1;
height: 50%;
overflow-y: auto;
background-color: rgba(250,158,0.521);
"
></div>
<div
style="
flex: 1;
height: 50%;
overflow-y: auto;
background-color: rgba(144,243,144,0.555);
"
></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
