Flex-shrink not working as expected

Question

I'm starting to work with flexbox, and, in order to understand flex-grow and flex-shrink, I used a simple program that displays two blocks and makes them take up the whole width using flex-grow: 2 in one of them and flex-grow: 1 in the other.

If I check the following line in the console: $(".one").width() === $(window).width() /3 it returns true. So far, so good.

The problem appears when I reduce the window size, because as soon as I do this the same line in the console ($(".one").width() === $(window).width() /3) starts returning false.

I know the default value for flex-shrink is 1. 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?

Here's my 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;
}

<div class="wrapper">
  <div class="flex-container">
    <div class="box one"></div>
    <div class="box two"></div>
  </div>
</div>

Answer 1

While not relevant to your question it might be worth noting:

flex-wrap takes precedence over flex-shrink, unless the item is wider than the container.

• So if you have flex-wrap enabled and you're expecting two items to shrink to fit side by side on a single row they won't, they'll wrap first even if there's plenty of shrink-potential.
• If the item is wider than the parent container it can't wrap so it will shrink if it can.
• You'd have to solve this with min/max widths, make the initial size smaller (this is probably the best way) or creating a new parent container without flex-wrap.

See also Is there any use for flex-shrink when flex-wrap is wrap?