title: Flexbox not wrapping when content is too wide
body: <p>I have a two column layout with flexbox and <code>flex-wrap: wrap</code> set on the parent of the columns. However the columns are not wrapping even though the contents are clearly wider than the width percentage that the column is set to. How do I get the column to wrap when the contents are wider than the percentage width?</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-wrap: wrap;
    height: 100px;
    width: 300px;
  }
  .left {
    width: 60%;
    background-color: lightblue;
  }
  .right {
    width: 40%;
    background-color: lightcoral;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="left"&gt;
      &lt;table&gt;&lt;tbody&gt;
        &lt;tr&gt;&lt;td&gt;Column 1&lt;/td&gt;&lt;td&gt;Column 2&lt;/td&gt;&lt;td&gt;Column 3&lt;/td&gt;&lt;td&gt;Column 4&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;&lt;/table&gt;
    &lt;/div&gt;
    &lt;div class="right"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>