Why don't flex items shrink past content size?
<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>