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

Question

I'm fooling around with flex in order to create a single page application. I'm using 2 flex boxes:

• Root Flex box (flex 1) (100% width & height)
  • Nav Bar (55px height)
  • App Content (Flex stretched to the bottom of the page)
  • Flex Container (flex 2) (100% height of PARENT)
    • Left Nav (240px width)
    • Section content (Flex stretched to the right of the page)

As far as I can tell, my CSS is correct, however, the result I get is that the Flex Container (flex 2) inherits its grandparent height, instead of it's parent's height (obtained via flex stretching). This is super annoying since my page ends up overflowing and looks janky.

JSFiddle to repro: https://jsfiddle.net/mdecdawd/ . Please inspect elements to notice the overflow happening.

CSS: .app { flex: 1; height: 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>

Here are some screenshots to illustrate the issue: Container CSS, width and height

Flex box 2 (stretched as expected)

Child of Flex box 2, inheriting grandparent's height :(

I'm pulling my hair out even harder since Firefox renders my page correctly, however Chrome and Safari do not.

Any ideas? So far I've tried: position: relative on [flex 2] min-height on everything. No effect

Answer 1

You're telling div with class app (a flex item in the main flex container) to have the same height of the parent.

From your code:

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

So this div will naturally overflow the container since there is another flex item ( .navBar ) with a height: 55px . Hence, the overflow will be 55px.

Try this adjustment:

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

Revised Demo