title: Long text is breaking my flexbox layout
body: <p>I have two columns.</p>
  
  <p>In my left column I have a <code>p</code> tag.</p>
  
  <p>This <code>p</code> tag has a lot of text and goes really wide and outside my column.</p>
  
  <p>When I remove my <code>p</code> tag the column layout looks fine.</p>
  
  <p>I've tried setting a <code>max-width</code> on the <code>p</code> tag but this is not very good responsively. I want the <code>p</code> tag to be 100% width of the <code>col</code> div.</p>
  
  <p>I want the text to go 100% width and wrap nicely.</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>.wrapper {
    display: flex;
    flex: 1 0 auto;
  }
  
  .col {
    flex: 1 0 auto;
  }
  
  p {
    max-width: 100px; /* I dont want to do this. */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='wrapper'&gt;
    &lt;div class='col'&gt;
      &lt;p&gt;small amount of text&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class='col'&gt;
      &lt;p&gt;text very long text very longtext very long text very long text very long text very long text very long text very long text very long text very long text very long text very long.
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>