I cannot set height after flex-direction: column

Question

I've just started using Flexbox and bumped into a problem.

If I set a <section> as flex-direction: column, then it stops responding to the height attribute.

Here's the relative code:

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

What I need is to vertically stretch the .main-aside-footer-section element so that it fills the screen's height (and so that my footer sticks to the bottom of the page).

I am using Chrome Version 53.0.2785.101 (64-bit) on Ubuntu 15.10 64bit

Can anybody help?

Thanks in advance

Your css is invalid. Remove extra `.` from line # 21. And move `flex-grow: 1` to styles of `.main-aside-section` — Mohammad Usman, Feb 21 '17 at 14:19
Thank you Muhammad, you are right. Moreover, I must admit that your solution is quite a bit more elegant as it does away from the need to set a margin-top: auto on footer as well as any height to .main-aside-footer-section. Here's an updated codepen to illustrate https://codepen.io/anon/pen/qrWOpv — sgouros, Feb 22 '17 at 07:05

score 2 · Accepted Answer · edited May 23 '17 at 10:29

2

Actually, the height works fine. Wrap a border around the element to see:

revised codepen

Just add margin-top: auto to the footer:

revised codepen

Here are a couple of posts that provide more details:

edited May 23 '17 at 10:29

Community

1
1

answered Feb 21 '17 at 14:20

Michael Benjamin

346,931
104
581
701

score 0 · Answer 2 · answered Feb 21 '17 at 14:22

0

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

footer {
    flex: 1;
}

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

This stretches the footer to fill the remaining space for your .main-aside-footer-section

answered Feb 21 '17 at 14:22

duvigneau

201
1
5

I cannot set height after flex-direction: column

2 Answers2