Height: 100%; Not Working With Flex Box

html, body {  margin: 0;}.box {  display: flex;  flex-direction: column;  height: 100vh;          /* instead of using 100% all over, use viewport units once */  background-size: cover;  background: black url(http://lorempixel.com/500/500/nature/4/) no-repeat center;}.box .row.content,.content .one-fifth.column {  flex: 1;                /* fill the space equal, no matter row or column direction */  display: flex;}
.box .row.header,.box .row.footer { color: white; }.box .row.content { background: #fff; }.yellow-back { background: #ffe001; }.red-back { background: #e31e25; }.green-back { background: #66af45; }.purple-back { background: #954294; }
@media screen and (max-width: 600px) {  /* smaller screens */  .box .row.content {    flex-direction: column;   /* by simply swap direction it work on smaller screen */  }}

<div class="box">  <div class="row header">    <p><b>header</b><br /><br />(sized to content)</p>  </div>
  <div class="row content">    <div class="one-fifth column green-back">Here</div>    <div class="one-fifth column red-back">Here</div>    <div class="one-fifth column">Here</div>    <div class="one-fifth column yellow-back">Here</div>    <div class="one-fifth column purple-back">Here</div>  </div>
  <div class="row footer">    <p><b>footer</b> (fixed height)</p>  </div></div>

Keeping flexbox container and overflowing children within 100% height

Check this https://codepen.io/anon/pen/EJYwmq

The problem is that items inside flexboxes have an implicit "min-height" equals to it's real height. You can set it's min-height: 0px.

html, body {
  height: 100%;
  margin: 0;
}

#container {
  height: 100%;
  background-color: gray;
  display: flex;
  flex-direction: column;
}

#b {
  flex: 100% 1 1;
  min-height: 0px; // this is important!
  overflow: hidden;
  display: flex; // make it a flex too so you have better control of the scrollbar
  flex-direction: column;
}

#s2 {
  min-height: 0px;
  max-height: 100%;
  overflow: auto;
  background-color: lightblue;
}

height 100% in flex

You can overlap (nest) flex boxes :

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.wrapper {
  border: 1px solid red;
  padding: 20px;
  min-height: 100%;
  display: flex;
  /* change flex-direction from column to row will work */
  flex-direction: column;
  box-sizing:border-box;
}

.container {
  display:flex;
  flex-direction: column;/* up to your needs */
  border: 1px solid green;
  padding: 20px;
  flex: 1;
}

.content {
  border: 1px solid blue;
  flex:1;
}

<div class="wrapper">
  <div class="container">
    <div class="content">
      Hello there
    </div>
  </div>
</div>

html{  height: 100%; /* changed to height */  width: 100%;}body{  height: 100%; /* changed to height */  width: 100%;  background-color: green;}.main{  display: flex;  flex-direction: row;  min-height: 100%;  justify-content: space-between;  background-color: blue;}

<div class="main">  <div>Text 1</div>  <div>Text 2</div></div>

:root {/* possible use of var here */--col1 : 1fr;--col2 : 2fr;}main {  display: grid;  grid-template-columns: var(--col1) var(--col2);}main> * {  border:solid 1px;  margin:2px;}section {  grid-column:1;}article {  grid-column:2;  grid-row:1 / 10;}
/* breakpoint at 768px */@media screen and (max-width: 768px) {  main {    display: flex;    flex-flow: column;  }  main section + section {/* best is to use an id */    order: 1;  }}

<main>  <section>    <h1>About</h1>    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>  </section>  <section><! -- that one might deserve an id to easy reorder its position -->    <h1>Disclaimer</h1>    <p>Here there be naughty things!!!</p>  </section>  <article class="blog">    <h1>Blog Entry</h1>    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend molestie orci. Donec pellentesque viverra magna, nec viverra velit laoreet non. Etiam blandit erat nulla, semper faucibus eros rhoncus vel.</p>  </article>
</main>