Контейнер Flexbox в Chrome не получает высоту 100%

Question

Контейнер с контейнером Flexbox внутри другого контейнера flex не получает 100% -ной высоты в Chrome, но в Firefox и Edge все нормально.

Codepen example

.container { 
    display: flex; 
    flex-direction: column; 

    height: 100%; 
    width: 100%; 

    .inside-container { 
    display: flex; 
    flex-direction: column; 

    height: 100%; 

    } 
} 

Answer 1

Вы не нашли height: 100% на родительский элемент: <header>

После того, как вы добавить, что в, макет работает в Chrome, а также.

header { 
    min-height: 100%; 
    width: 100%; 
    height: 100%; /* NEW */ 
} 

Revised Codepen

При использовании процентных высот, хром требует, чтобы каждый родительский элемент имеет определенную высоту. Подробнее здесь:

• Working with the CSS height property and percentage values

При использовании процентных высот в Flexbox, есть рендеринг различие между основными браузерами. Подробнее здесь:

• Chrome/Safari not filling 100% height of flex parent