I seem unable to get the flex-grow property to take the padding of a div into account when choosing which element to grow.

In this codepen,
I have two divs in a flexbox. I want the divs to be of even width, but you can see from the pen, the div with the button isn’t as wide as the one with text.

One div has padding to make the text inside look natural. Both divs have a flex-grow value of 1; from my understanding this should mean that the browser chooses the smallest element, and grows it until it’s of equal width to the second smallest, then grows them evenly until the third and so on. I also was of the understanding that box-sizing: border-box should also require the flex-grow to take the padding into account when measuring the ‘smallest’ box.

Despite this, the right div is wider by the exactly the padding. I believe the flex-grow process isn’t starting with the smaller div by total width, but only looking at the content width, and thus grows both divs from the beginning.

Any help with this is appreciated, thanks!