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

Question

为了创建一个单页应用程序，我正在玩弄 flex。我正在使用 2 个弹性盒子：

• 根 Flex 框（flex 1）（100% 宽度和高度）
  • 导航栏（55 像素高度）
  • 应用内容（Flex 拉伸到页面底部）
  • Flex 容器（flex 2）（父级的 100% 高度）
    • 左侧导航（240 像素宽度）
    • 部分内容（Flex 拉伸到页面右侧）

据我所知，我的 CSS 是正确的，但是，我得到的结果是 Flex Container (flex 2) 继承了它的祖父母高度，而不是它的父母高度（通过 flex 拉伸获得）。这非常烦人，因为我的页面最终溢出并且看起来很乱。

要复制的 JSFiddle：https://jsfiddle.net/mdecdawd/。请检查元素以注意溢出的发生。

CSS： 。应用程序 { 弹性：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、宽度和高度

Flex box 2（按预期拉伸）

Flex box 2的孩子，继承祖父母的身高:(

由于 Firefox 可以正确呈现我的页面，但 Chrome 和 Safari 却不能。

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

Answer 1

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

来自您的代码：

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

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

试试这个调整：

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

Revised Demo