Flexbox child does not respect the boundaries of its parent
<p>I am trying to use flexbox to make a responsive layout. Quite simply, I am trying to have the image in the center of <a href="http://codepen.io/CodyMoore240/full/jrPLBJ/" rel="nofollow"><strong>this example</strong></a> perform like <a href="http://codepen.io/CodyMoore240/full/QEjNvb" rel="nofollow"><strong>this example</strong></a> when the browser windows height and width are manipulated.</p>

<p>The two examples are pretty much the same except that on the first one, a blue banner has been added that has a set height. The green banner needs take up the remaining vertical space and the image needs to respect the height of the green banner. </p>

<p>*note: the blue banners height is dynamic in a sense that I will not know what the height is until the page is rendered. It is hard coded in the example at 200px so the example will work. </p>

<p>Any help would be greatly appreciated.</p>

<p>Code example:</p>

<pre><code>&lt;html&gt;
  &lt;body&gt;
    &lt;div class="wrapper"&gt;
      &lt;div class="imageWrapper"&gt;
        &lt;img src="http://fpoimg.com/1000x800"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="stacksWrapper"&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;

    * { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
html { 
  margin:0; 
  padding:0; 
  height:100%; 
  width: 100%; 
}
body { 
  margin:0; 
  padding:0;  
  background:red; 
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.wrapper { 
 width: 100%;
  text-align: center;
  background: green;
  flex: 1;
  flex-basis: 0;
  min-height: 0;
  position: relative;
}

.imageWrapper {
  height:100%; 
  width: 100%;

  img {
      max-height:100%; 
      max-width:100%; 
      width: auto;
  }
}

.stacksWrapper {
  height: 200px;
  width: 100%;
  background-color: blue;
}
</code></pre>