Я не могу установить высоту после гибкого направления: столбец

Question

Я только начал использовать Flexbox и столкнулся с проблемой.

Если я установил <section> как flex-direction: column, он перестает отвечать на атрибут height.

Вот относительный код:

body { 
 
    display: flex; 
 
    background: #d6d6d6; 
 
    min-height: 100vh; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
nav { 
 
    display: flex; 
 
    width: 94px; 
 
    height: 100vh; 
 
    background: #131519; 
 
    background: #1C1D21; 
 
    color: white; 
 
} 
 

 
.main-aside-footer-section { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-grow: 1; 
 
    . 
 
    /*** THIS IS NOT WORKING ****/ 
 
    height: 100vh; 
 
    /****************************/ 
 
} 
 

 
.main-aside-section { 
 
    display: flex; 
 
} 
 

 
main { 
 
    display: flex; 
 
    background: #83B0B9; 
 
    background: #343943; 
 
    background: #E4B162; 
 
    background: #D35657; 
 
    flex-grow: 1; 
 
} 
 

 
aside { 
 
    display: flex; 
 
    background: #343943; 
 
    min-width: 50px; 
 
    color: white; 
 
    /* display: none;*/ 
 
} 
 

 
footer { 
 
    display: flex; 
 
    background: #333; 
 
    color: #ededed; 
 
}

<nav> 
 
    <ul> 
 
    <li>nav 1</li> 
 
    <li>nav 2</li> 
 
    </ul> 
 
</nav> 
 

 
<section class="main-aside-footer-section"> 
 

 
    <section class="main-aside-section"> 
 
    <main> 
 
     this is main 
 
    </main> 
 

 
    <aside> 
 
     <ul> 
 
     <li>aside 1 </li> 
 
     <li>aside 2 </li> 
 
     </ul> 
 
    </aside> 
 

 
    </section> 
 
    <!-- main-aside--> 
 

 
    <footer>footer</footer> 
 

 
</section> 
 
<!-- main-aside-footer-->

https://codepen.io/anon/pen/qRepJr

Что мне нужно вертикально растянуть .main-aside-footer-section элемент так, чтобы он заполнил высоту экрана (и так, что мой сноска придерживается нижней части страницы).

Я использую Chrome Версия 53.0.2785.101 (64-разрядная) на Ubuntu 15.10 64bit

Может кто-нибудь помочь?

Заранее благодарен

Answer 1

Собственно, высота отлично работает. Оберните границу вокруг элемента, чтобы увидеть:

revised codepen

Просто добавьте margin-top: auto к footer:

revised codepen

Вот несколько сообщений, которые обеспечивают более подробную информацию:

• Proper use of flex properties when nesting flex containers
• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 2

.main-aside-footer-section { 
    display: flex; 
    flex-direction: column; 
    flex: 1; 
} 

footer { 
    flex: 1; 
} 

https://codepen.io/anon/pen/PWMQGV

Это растягивает колонтитул, чтобы заполнить оставшееся пространство для .main-aside-footer-section