Chrome Flexbox其他100％高Flexbox內的高度為100％高
[英]Chrome flexbox 100% height inside other 100% height flexbox overflows
問題描述
我正在嘗試使用flexbox創建全高頁面，其中內容也使用flexbox。 該頁面應如下所示例如它應該是什么樣子 。 藍色div是動態的，並且高度可能會變化，紅色內容應占據內容div的剩余空間。 這在Firefox和IE上均可使用，但是在Chrome上會溢出。 有人可以解釋為什么它在Chrome上溢出嗎？
HTML如下：
<body>
<div class="container">
<div class="navbar">Navbar</div>
<div class="content">
<div class="container">
<div class="fill"></div>
<div class="dynamic">Here is some dynamic content<br>Test</div>
</div>
</div>
</div>
</body>
CSS是：
body{
margin:0;
}
.container{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.navbar{
background-color: #ccc;
flex: none;
}
.content{
background-color: #333;
flex: auto;
padding: 10px;
}
.dynamic{
background-color: #0066ff;
flex: none;
}
.fill{
flex: auto;
background-color: #ff0000;
}
1 個解決方案
解決方案1
0 2016-06-15 07:08:02
這是更新的代碼段。
將flex:1用於需要自動調整高度的容器。
body { margin: 0; } .container1 { display: flex; flex-direction: column; width: 100%; height: 100vh; } .navbar { background-color: #ccc; } .content { flex: 1; background-color: #ff0000; border: 10px solid #333; border-bottom: none; } .dynamic { background-color: #0066ff; border: 10px solid #333; border-top: none; }
<body> <div class="container1"> <div class="navbar">Navbar</div> <div class="content"> </div> <div class="dynamic">Here is some dynamic content <br>Test</div> </div> </body>
使用flexbox和100％的高度
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.