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

Question

為了創建一個單頁應用程序，我在鬼混Flex。 我正在使用2個彈性盒：

• 根伸縮盒（伸縮1）（100％寬度和高度）
  • 導航欄（55像素高）
  • 應用內容（Flex延伸到頁面底部）
  • Flex容器（flex 2）（父母的100％高度）
    • 左導航（240像素寬）
    • 板塊內容（Flex延伸到頁面右側）

據我所知，我的CSS是正確的，但是，我得到的結果是Flex容器（flex 2）繼承了其祖父母的高度，而不是其父代的高度（通過flex拉伸獲得）。 這真是太煩人了，因為我的頁面最終溢出並看上去很亂。

要復制的JSFiddle： https ://jsfiddle.net/mdecdawd/。 請檢查元素以注意溢出的發生。

CSS： .app {flex：1; 高度：100％; 順序：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，寬度和高度

伸縮盒2（按預期拉伸）

Flex盒子2的子元素，繼承祖父母的身高:(

由於Firefox可以正確呈現我的頁面，因此我將更加努力，但是Chrome和Safari卻無法。

有任何想法嗎？ 到目前為止，我已經嘗試過：position：相對[flex 2]最小高度的相對值。 沒有效果

Answer 1

您要通過類app （主flex容器中的flex項）告訴div具有與父對象相同的高度。

從您的代碼：

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

因此，此div自然會溢出容器，因為還有另一個height: 55px flex項（ .navBar ）。 因此，溢出將為55px。

嘗試此調整：

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

修改后的演示