Flex div наследует высоту бабушки и дедушки вместо родительского

Question

Я обманываю Flex с целью создания одностраничного приложения. Я использую 2 сгибать коробки:

• Root Flex коробку (Flex 1) (100% ширина & высота)
  • Nav Bar (высота 55 пикселей)
  • App Content (Flex растягивается до дна страницы)
  • Flex контейнер (Flex 2) (100% высота Parent)
    • Left Nav (240px ширина)
    • п Содержание Тион (Flex растягивается до правой части страницы)

Насколько я могу сказать, мой CSS является правильным, однако, результат я получаю то, что Flex Контейнер (Flex 2) наследует его высоту бабушки и бабушки, а не ее родительскую высоту (полученную с помощью растяжения гибкого диска). Это очень раздражает, так как моя страница заканчивается переполнением и выглядит странно.

JSFiddle для воспроизведения: https://jsfiddle.net/mdecdawd/. Проверьте элементы, чтобы заметить, что происходит переполнение.

CSS: .app { прогибается: 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 коробки 2 (вытянутые, как и ожидалось)

Ребенок Flex коробки 2, наследуя высоты прародителя :(

Я потянув меня за волосы еще сильнее, так как Firefox делает мою страницу правильно, однако Chrome и Safari не делают.

Любые идеи? До сих пор я пробовал: позиция: относительная на [flex 2] минимальная высота на все. Без эффекта

Answer 1

Вы указываете div с классом app (гибкий элемент в основном контейнере гибкого диска), чтобы иметь одинаковую высоту родителя.

Из кода:

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

Так что ДИВ естественно переполнение контейнера, поскольку существует еще один гибкий элемент (.navBar) с height: 55px. Следовательно, переполнение будет 55 пикселей.

Попробуйте эту настройку:

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

Revised Demo