Why is padding expanding a flex item?

Question

In the snippet below, the first row has two divs with flex-grow: 1. As expected, each div takes up 50% of the screen.

When adding padding to the left di

Answer 1

That's the correct behaviour as far as I am aware.

flex:1 is, of course, shorthand for:

flex-grow:1;
flex-shrink:1;
flex-basis:0

This allows the div to grow if necessary which, in this case, it does. It's not automatically going to maintain the flex-items as all the same size if they are, in fact, different.