title: CSS FlexBox cropping content with min- sizes
body: <p>I'm trying to get "FlexBox" columns to stretch and squish to fill horizontal space, but with horizontal scrolling at small sizes so as not to crop their content. </p>
  
  <p>What I've done is create a container element with an layout out the flexbox direction, orientation, etc. that has an overflow of auto:</p>
  
  <pre><code>.container {
      display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox;      /* TWEENER - IE 10 */
      display: -webkit-flex;     /* NEW - Chrome */
      display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
      -webkit-box-pack: start;
      -moz-box-pack: start;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
  
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
  
      overflow:auto;
  }
  </code></pre>
  
  <p>I have a column:</p>
  
  <pre><code>.column {
      overflow:hidden;
      min-width:100px;
  }
  </code></pre>
  
  <p>And content in the column: </p>
  
  <pre><code>.column-content {
      min-width:200px;
  }
  </code></pre>
  
  <p>And here's the HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;div class="column"&gt;
          &lt;div class="column-content"&gt;...&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="column"&gt;
          &lt;div class="column-content"&gt;...&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="column"&gt;
          &lt;div class="column-content"&gt;...&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="column"&gt;
          &lt;div class="column-content"&gt;...&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>When you scale the viewport down horizontally, the columns will shrink all the way down to 100px, their min-width. But what I want them to do is not shrink beyond 200px, their content's min-width. </p>
  
  <p>I can't set the columns min-width higher because I don't know what the content of these columns is going to look like, and what their minimum width will be as different components are going to be loaded in there. </p>
  
  <p>Here's a plunk illustrating:</p>
  
  <p><a href="http://plnkr.co/edit/CoIYdHXQVnAYzSp5m1tG?p=preview" rel="nofollow">http://plnkr.co/edit/CoIYdHXQVnAYzSp5m1tG?p=preview</a></p>
  
  <p>Any ideas?</p>
  
  <p>Thanks</p>