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; 
}

来源

2016-06-15 LasershowJack

添加'箱尺寸：边界盒;''到.content' – SeinopSys

这里是一个更新的片段。

使用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>

来源

2016-06-15 07:08:02 Pugazh

您好感谢您的回答，但问题是，内容DIV中的div容器得到动态加载，所以它应该仍然在这个容器div内。是否有可能保持看起来HTML结构，并仍然没有在Chrome上溢出？ – LasershowJack

Chrome flexbox其他100％高度flexbox溢出100％高度

回答

相关问题