Why is my flexbox not working correctly?
<p>I have three divs in a row. The first should be a fixed with, the second should expand until it hits a "max-width", and the third div should take up the remaining space. It works correctly until the third div has text that reaches the entire width. Instead of the text just wrapping it begins making the second div smaller.</p>

<pre><code>&lt;div id="container"&gt;
    &lt;div id="one"&gt;
    sdfsdf
    &lt;/div&gt;
    &lt;div id="two"&gt;
    fghfgh fghfghd sdf sdf sdf ssdf sdf gh
    &lt;/div&gt;
    &lt;div id="three"&gt;
    sdfsdfsdfsdfsfd sdf sdf sdf sdf sdfwef sdfwefs df 
    &lt;/div&gt;
&lt;/div&gt;

#container{
  background-color: red;
  display: flex;
  height: 100px;
  width: 400px;
}

#one{
  background-color: blue;
  flex-grow: 1;
  width:60px;
}
#two{
   background-color: red;
   max-width: 100px
}
#three{
   background-color: green;
   flex-grow: 1;
}
</code></pre>

<p>You can find a jsfiddle <a href="https://jsfiddle.net/vxa15qd1/16/" rel="nofollow">here</a>.</p>