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％高度

回答

相關問題