Flex div繼承祖父母的身高，而不是父母的身高

Question

我用flex來欺騙，以創建單頁面應用程序。我使用2柔性盒：

• 根柔性盒（撓曲1）（100％的寬度&高度）
  • 導航欄（55像素高度）
  • 應用內容（Flex的拉伸至底部頁面
  • Flex容器（撓曲2）（PARENT的100％高度）
    • 左NAV（240像素寬）
    • 二段）重刑內容（Flex的拉伸到頁面的右邊）

至於我可以告訴大家，我的CSS是正確的，但是，結果我得到的是，Flex容器（彎曲2 ）繼承它的祖父母高度，而不是父母的身高（通過伸展伸展獲得）。這是超級討厭，因爲我的網頁結束溢出，看起來很j。。

JSFiddle to repro：https://jsfiddle.net/mdecdawd/。請檢查元素以注意溢出發生。

CSS： .app { flex：1; 身高：100％; order：2; }

.container { 
    background-color: #884dff; 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    width: 100%; 
} 

.demo { 
    background-color: #ffffff; 
    flex: 1; 
    height: 100%; 
    width: 100%; 
} 

.flexWrapper { 
    display: flex; 
    flex-flow: row wrap; 
    height: inherit; 
    width: 100%; 
} 

.menu { 
    background-color: #ffffff; 
    border-right: 1px solid #a6a6a6; 
    flex: 0 0 auto; 
    height: 100%; 
    width: 80px; 
} 

.navBar { 
    box-sizing: border-box; 
    color: #FFFFFF; 
    flex: none; 
    padding: 5px 0 0 5px; 
    height: 55px; 
} 

.root { 
    height: 350px; 
    position: absolute; 
    width: 450px; 
} 

HTML <div class="root"> <div class="container"> <div class="navBar"> Navbar </div> <div class="app"> <div class="flexWrapper"> <div class="menu"> Menu </div> <div class="demo"> Demo Content </div> </div> </div> </div> </div>

下面是一些截圖來說明問題： 集裝箱CSS，寬度和高度

的Flex盒2（拉伸如預期）

的Flex盒2的兒童，繼承祖父的身高:(

我拉我的頭髮就更難了，因爲Firefox的正確呈現在我的網頁，但Chrome和Safari沒有。

任何想法？到目前爲止，我已經嘗試過： 位置：相對於[flex 2] 最小高度。沒有效果

Answer 1

您正在告訴div與類app（主flex容器中的flex項）具有相同的父級高度。

從代碼：

.app { 
    flex: 1; 
    height: 100%; 
    order: 2; 
} 

那麼這個div就會自然溢出的容器，因爲有另一個柔性項（.navBar）與height: 55px。因此，溢出將是55px。

試試這個調整：

.app { 
    flex: 1; 
    height: calc(100% - 55px); 
    order: 2; 
} 

Revised Demo