title: Why don't flex items shrink past content size?
body: <p>I have 4 flexbox columns and everything works fine, but when I add some text to a column and set it to a big font size, it is making the column wider than it should be due to the flex property.</p>
  
  <p>I tried to use <code>word-break: break-word</code> and it helped, but still when I resize the column to a very small width, letters in the text are broken into multiple lines (one letter per line), and yet the column does not get smaller width than one letter size. </p>
  
  <p>Watch this <a href="http://screencast-o-matic.com/watch/cDetln1tyT" rel="noreferrer">video</a>
  (at the start, the first column is the smallest, but when I resized the window, it is the widest column. I just want to respect flex settings always; flex sizes 1 : 3 : 4 : 4)</p>
  
  <p>I know, setting font-size and column padding to smaller will help... but is there any other solution?</p>
  
  <p>I can not use <code>overflow-x: hidden</code>.</p>
  
  <p><a href="https://jsfiddle.net/78h8wv4o/3/" rel="noreferrer">JSFiddle</a></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>.container {
    display: flex;
    width: 100%
  }
  .col {
    min-height: 200px;
    padding: 30px;
    word-break: break-word
  }
  .col1 {
    flex: 1;
    background: orange;
    font-size: 80px
  }
  .col2 {
    flex: 3;
    background: yellow
  }
  .col3 {
    flex: 4;
    background: skyblue
  }
  .col4 {
    flex: 4;
    background: red
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="col col1"&gt;Lorem ipsum dolor&lt;/div&gt;
    &lt;div class="col col2"&gt;Lorem ipsum dolor&lt;/div&gt;
    &lt;div class="col col3"&gt;Lorem ipsum dolor&lt;/div&gt;
    &lt;div class="col col4"&gt;Lorem ipsum dolor&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>