title: Why do flexbox item images resize differently according to their initial size?
body: <p>I have four images: two small, two big (dimensions shown in html). They all have their img width set to 100% but their parent div is set to a specific width. When I resize the browser window the smaller images shrink and the larger ones don't, right away.</p>
  
  <p>I have a red border around the divs and green border around the imgs. The smaller images' green borders shrink before the larger ones. Why is that?</p>
  
  <p><a href="http://jsfiddle.net/brcrnj80/6/">http://jsfiddle.net/brcrnj80/6/</a></p>
  
  <pre><code>img {
    border: 3px solid green;
    width: 100%;
  }
  
  .item {
    border: 1px solid red;
    max-width: 250px;
    min-width: 60px;
    margin: 10px;
  }
  </code></pre>
  
  <p>Thanks</p>