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

Question

我正在使用flex来创建单页面应用程序。我使用了2个弹性盒子：

• Root Flex box（flex 1）（100％宽度和高度）
  • 导航栏（55px高度）
  • 应用内容（Flex延伸到页面底部）
  • Flex容器（flex 2）（父母身高100％）
    • 左导航（240像素宽）
    • 部分内容（Flex伸展到页面右侧）

据我所知，我的CSS是正确的，但是，我得到的结果是Flex容器（flex 2）继承了祖父母的高度，而不是它的父亲的身高（获得）通过柔性拉伸）。这非常令人讨厌，因为我的页面最终溢出并看起来很笨拙。

JSFiddle to repro：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却没有。

有什么想法吗？到目前为止，我已经尝试过： 位置：相对于[flex 2] 一切都是最小高度。没效果

Answer 1

您告诉div类app（主要Flex容器中的弹性项）与父级的高度相同。

从你的代码：

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

所以这个div会自然地溢出容器，因为还有另一个带有.navBar的弹性项（height: 55px）。因此，溢出将是55px。

尝试此调整：

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

Revised Demo