title: Flex-shrink not working as expected
body: <p>I'm starting to work with flexbox, and, in order to understand <code>flex-grow</code> and <code>flex-shrink</code>, I used a simple program that displays two blocks and makes them take up the whole width using <code>flex-grow: 2</code> in one of them and <code>flex-grow: 1</code> in the other.</p>
  
  <p>If I check the following line in the console: <code>$(".one").width() === $(window).width() /3</code> it returns true. So far, so good.</p>
  
  <p>The problem appears when I reduce the window size, because as soon as I do this the same line in the console (<code>$(".one").width() === $(window).width() /3</code>) starts returning false.</p>
  
  <p>I know the default value for <code>flex-shrink</code> is <code>1</code>. Wouldn't that mean that the proportions between both blocks would be maintained (since they are both being shrunk by the same amount)? Can anyone explain why this result happens?</p>
  
  <p>Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    font-family: verdana;
    margin: 0;
  }
  
  body {
    background: #eee;
  }
  
  .wrapper {
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
  }
  
  .flex-container {
    display: flex;
    background-color: white;
  }
  
  .box {
    height: 100px;
  }
  
  .one {
    background-color: red;
    flex-grow: 1;
  }
  
  .two {
    background-color: blue;
    flex-grow: 2;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="flex-container"&gt;
      &lt;div class="box one"&gt;&lt;/div&gt;
      &lt;div class="box two"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>