title: Flex child wrapping when it shouldn't; flex-wrap: nowrap not working
body: <p>No idea why, but <code>flex-flow: row nowrap</code> doesn't seem to be preventing the orange div from wrapping. The green and orange divs should be side by side - what am I doing wrong here? The orange div also seems to have no height.</p>
  
  <p>Any help would be appreciated here, thank you.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.appShopSummaryContainer {
   display: flex;
   flex-flow: column wrap;
  }
  .appShopSummaryProductWrap {
    flex-basis: 100%;
    width: 100%;
    background: pink;
    flex-flow: row nowrap;
    display: flex;
  }
  .appShopSummaryImg {
   flex-basis: 40%; /* flex: 0 0 40% */
    width: 40%;
   height: auto;
   padding-bottom: 26.667%;
    background: green;
  }
  .appShopSummaryInfo {
    flex-basis: 60%; /* flex: 0 0 60% */
    width: 60%;
    background: orange;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='appShopSummaryContainer'&gt;
    &lt;div class='appShopSummaryProductWrap'&gt;
      &lt;a href='#'&gt;&lt;div class='appShopSummaryImg'&gt;&lt;/div&gt;erg&lt;/a&gt;
      &lt;div class='appShopSummaryInfo'&gt;wgh&lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class='appShopSummaryProductWrap'&gt;
      &lt;a href='#'&gt;&lt;div class='appShopSummaryImg'&gt;&lt;/div&gt;jyu&lt;/a&gt;
      &lt;div class='appShopSummaryInfo'&gt;erge&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>