Fill up remaining space using Flexbox

Question

I want the middle row to fill up whole browser just like any other websites. So even if there are few contents, I want the middle row to fill the entire space.

Here is t

Answer 1

If I duplicated what you are going for, adding display: block to .main should fix this. I've updated your jsfiddle and here's the link:

https://jsfiddle.net/zL26otcu/2/

Answer 2

You need a minor markup change and a few changes of your styles.

The most important change is to wrap your main and aside elements and give that flex: 1, making it always fill remaining space

Updated fiddle

@import "compass/css3";

html, body {
  margin: 0;
  height: 100vh;
}
body {
  padding: 2em;
  box-sizing: border-box;             /*  include padding size within height  */
}

.wrapper {
  min-height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;   /*  flow as column, no wrap  */
  flex-flow: column nowrap;
  font-weight: bold;
  text-align: center;
}

.header {
  padding: 10px;
  background: tomato;
}

.footer {
  padding: 10px;
  background: lightgreen;
}

.wrapper-inner {
  flex: 1;                            /*  fill remaining space  */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.main {
  padding: 10px;
  text-align: left;
  background: deepskyblue;
}

.aside-1 {
  padding: 10px;
  background: gold;
}

.aside-2 {
  padding: 10px;
  background: hotpink;
}

@media all and (min-width: 600px) {
  .aside {
    flex: 1 auto;
  }
}

@media all and (min-width: 800px) {
  .main {
    flex: 3 0px;
  }
  .aside-1 {
    order: 1;
  }
  .main {
    order: 2;
  }
  .aside-2 {
    order: 3;
  }
}

<div class="wrapper">
  <header class="header">Header</header>
  <div class="wrapper-inner">
    <article class="main">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
    <aside class="aside aside-1">Aside 1</aside>
    <aside class="aside aside-2">Aside 2</aside>
  </div>
  <footer class="footer">Footer</footer>
</div>

Answer 3

Add height:100vh to .main class

https://jsfiddle.net/zL26otcu/1/