title: Text not wrapping inside a flex container
body: <p>I managed to use the Flexible Box Layout Module for a lot of things, however when it comes to paragraphs I'm experiencing this issue:</p>
  
  <ul>
  <li><p>When I use a small amount of text everything works as expected:</p>
  
  <p><a href="https://i.stack.imgur.com/jY0CQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jY0CQ.png" alt="enter image description here"></a></p></li>
  <li><p>When I use a large amount of text the layout breaks:</p>
  
  <p><a href="https://i.stack.imgur.com/z6aPH.png" rel="noreferrer"><img src="https://i.stack.imgur.com/z6aPH.png" alt="enter image description here"></a></p></li>
  </ul>
  
  <p>Here is the code I am using:                </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    width: 90%;
    margin: 3em auto;
    background-color: #aaa;
  }
  section {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    border: 1px solid black;
  }
  .title {
    flex: 1 0 100%;
    text-align: center;
    background-color: #eee;
  }
  .image {
    flex: 0 0 auto;
    background-color: #ccc;
  }
  .image img {
    display: block;
    max-height: 100%;
    max-width: 100%;
  }
  .text {
    flex: 6 0 auto;
    background-color: #96AED1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;div class="title"&gt;
      &lt;h1&gt;Title here&lt;/h1&gt;
    &lt;/div&gt;
  
    &lt;div class="image"&gt;
      &lt;img src="http://www.macovei-sculptor.ro/img.jpg"&gt;
    &lt;/div&gt;
  
    &lt;div class="text"&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis velit, ullamcorper eu ornare sed, vulputate quis diam. Duis ultrices rutrum sapien, in condimentum nibh sagittis sit amet. Morbi sit amet rhoncus dui, at pharetra nisi. Nunc et
        lacus porttitor, pretium nisl at, sollicitudin velit. Donec felis nisl, consequat vitae egestas vestibulum, egestas non tortor. Cras mattis non sem nec aliquam. Sed dignissim sit amet sapien vitae feugiat. Pellentesque vel luctus ante, quis ornare
        purus. Nulla in arcu sapien. Aenean tempor arcu ac lacinia pellentesque. Quisque vulputate maximus augue, non aliquet ligula gravida in. Donec a leo justo. Integer velit eros, blandit sit amet elit eget, efficitur mollis nulla. Suspendisse tempor
        ligula facilisis scelerisque ullamcorper. Ut vehicula ligula ipsum, cursus condimentum sapien pretium ac.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why is the <code>&lt;p&gt;</code> tag not wrapping properly when using a large amount of text?</p>