In this article on making equal columns with flexbox, the author mentions 2 cases where things get ruined if some flex-items have padding. So he has a container with a width of 600px, and 3 flex-items with the 2nd one having a padding of 1rem.
First case is when we are using flex: 1. So, he describes the following problem:
I end up with three divs with a content size of 0, but the middle one has padding: 1rem. That means it has a content size of 0, plus 32px padding as well.We have 600 - 32 = 568px to divide equally, instead of 600px. All the divs want to grow at an equal rate, so 568 / 3 = 189.3333px.
Here's the codepen that he included in the article: Codepen
Now, in the 2nd case, he's using flex-basis: 100% and he mentions the following problem:
The thing is that 100% includes the padding in the computed values (because of * { box-size: border-box; }, which for the sake of this article, I’m assuming everyone is using). So, the outer divs end up with a content size of 600px, whereas the middle div ends up with a content size of 600 - 32 = 568px.This results in the .card having a final width of 214.483px while the others clock in at 192.75px.
Codepen: Codepen
Now what i don't understand is, why, in the 1st case, padding was deducted from the remaining space and the content-size of all flex-items was equal (i.e. 0), and in the 2nd case, it was deducted from the width of the flex-item and they had different content-sizes? (He was using border-box in both cases)
I have already read this answer and that checks out for case 2 and the numbers are perfect. In that, it's mentioned that while using border-box, the flex-basis defines the outer size of the flex-item. So, first the padding is removed from the flex-basis to calculate content-width, then the negative free space is distributed according the flex-shrink algorithm.
So, by that logic in the first case the middle item should have a content-size of 0 - 32 = -32px, and others should be 0.
This is mentioned in the spec regarding flex-base size :
When determining the flex base size, the item’s min and max main sizes are ignored (no clamping occurs). Furthermore, the sizing calculations that floor the content box size at zero when applying box-sizing are also ignored. (For example, an item with a specified size of zero, positive padding, and box-sizing: border-box will have an outer flex base size of zero—and hence a negative inner flex base size.)
So, how does it work?