rg_03
KPCKevin Powell - Community
•Created by rg_03 on 6/27/2024 in #front-end
Calculation of hypothetical main size and flex base size with paddings
So i was reading this article by kevin : https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/#:~:text=always%20the%20case%E2%80%A6-,The,-reason%20for%20this
Now he mentions 2 ways to make equal columns and 2 problems with it. First, using
flex:1, he mentions that since content-size of all items is 0, we only have 600-32 = 568px to distribute cuz of the padding on the middle element. So, after the padding is added back, middle element is wider. And padding isn't included in that flex-basis even though we used border-box
In the 2nd case, using flex-basis: 100%, he mentions that now the padding is included in the flex-basis and now the content-size of the middle item is 600-32 = 568px and of the others is 600px only. So, the middle one shrinks slightly less.
Now what i don't understand is how does the algorithm work exactly.
I have already read thishttps://stackoverflow.com/questions/34753491/how-does-flex-shrink-factor-in-padding-and-border-box 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 space is distributed and then padding is added back.
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. And so, after flex-grow , the middle one would be smaller.
The same scenario is mentioned in the spec here https://www.w3.org/TR/css-flexbox-1/#flex-base-size:~:text=main%20size.-,When%20determining%20the%20flex%20base3 replies