Chrome flexbox其他100%高度flexbox溢出100%高度
问题描述:
我想使用flexboxes制作完整高度的页面,其中的内容也使用flexbox。该页面应如下所示example of what it should look like。蓝色div是动态的,可以改变高度,红色内容应占用内容div的剩余空间。这适用于Firefox和IE,但是在Chrome上它会溢出。有人可以解释为什么它在Chrome上溢出?Chrome flexbox其他100%高度flexbox溢出100%高度
的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;
}
答
这里是一个更新的片段。
使用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>
+0
您好感谢您的回答,但问题是,内容DIV中的div容器得到动态加载,所以它应该仍然在这个容器div内。是否有可能保持看起来HTML结构,并仍然没有在Chrome上溢出? – LasershowJack
添加'箱尺寸:边界盒;''到.content' – SeinopSys