title: Prevent flex items from overflowing a container
body: <p>How do I make my flex item (<code>article</code> in this example), which has <code>flex-grow: 1;</code> <strong>not</strong> to overflow its flex parent/container (<code>main</code>)?</p>
  <p>In this example <code>article</code> is just text, though it might contains other elements (<code>table</code>s, etc).</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>main, aside, article {
    margin: 10px;
    border: solid 1px #000;
    border-bottom: 0;
    height: 50px;
  }
  main {
    display: flex;
  }
  aside {
    flex: 0 0 200px;
  }
  article {
    flex: 1 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main&gt;
    &lt;aside&gt;x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x &lt;/aside&gt;
    &lt;article&gt;don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y &lt;/article&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>