Flexbox children have not the same size

Question

I have a div with a display:flex container. Inside there are two other divs that have both flex-grow: 1.
I expected that both fields should have exactly the same size. But after opening my page, it turns out they don't. They have almost the same size, but one field gets 55%, the other 45%. How can that be?

.outer {
  width: 100px;
  display: flex;
}

.first {
  flex-grow: 1;
  flex-shrink: 0;
  background-color: red;
}

.second {
  flex-grow: 1;
  flex-shrink: 0;
  background-color: yellow;
}

<div class="outer">
  <div class="first">bla</div>
  <div class="second">blub</div>
</div>