title: Make flex item full width after it's been wrapped without using media queries
body: <p>Using flexbox here. Is it possible to make overlapping element full width after it has been pushed down without media queries?</p>
  
  <p>See attached plunker: <a href="http://plnkr.co/edit/mxACfJ2VR5yNgP9j8WJh?p=preview" rel="noreferrer">http://plnkr.co/edit/mxACfJ2VR5yNgP9j8WJh?p=preview</a>
  Resize preview window to less than 425px width. Third element get's pushed down and then I want to make it full width. When it is in the same line as other 2 elements it must not grow.</p>
  
  <p>css: </p>
  
  <pre><code>.flexContainer {
      display:flex;
      flex-wrap:wrap;
      border: 1px solid;
    }
    .img {
      width:110px;
      height:110px;
      background:red;
    }
    .flexItem {
      flex-basis:200px;
      flex-grow:1;
      background:#ff1;
    }
    .wrapItem {
      flex-basis:100px;
      background:#aab;
    }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="flexContainer"&gt;
    &lt;div class="img"&gt;fixed size img here&lt;/div&gt;
    &lt;div class="flexItem"&gt;This flexes&lt;/div&gt;
    &lt;div class="wrapItem"&gt;This wraps&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>