title: Text not wrapping in flexbox
body: <p>Can anyone tell me why the text inside a div in a row-direction flex container doesn't wrap properly but it goes overflow?</p>
  
  <p>If I change the direction to the <code>section</code>, the text will wrap, I don't understand why... </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>html,
  body {
    height: 100%;
  }
  
  body {
    overflow-y: scroll;
    margin: 0;
  }
  
  div,
  main,
  section {
    align-items: stretch;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    position: relative;
  }
  
  main {
    flex-grow: 1;
  }
  
  section {
    flex-flow: row nowrap;
    flex-grow: 1;
    justify-content: center;
    margin: 0 auto;
    max-width: 1280px;
    padding: 60px 0;
  }
  
  .content {
    flex-grow: 1;
    justify-content: start;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;main&gt;
      &lt;section&gt;
        &lt;div class="content"&gt;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget nulla sagittis sem egestas molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        &lt;/div&gt;
      &lt;/section&gt;
    &lt;/main&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>