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%20baseStack Overflow
How does flex-shrink factor in padding and border-box?
Let's say we have a flex container with a width of 400px.
Inside this container are three flex items:
:nth-child(1) { flex: 0 2 300px; } /* flex-grow, flex-shrink, flex-basis */
:nth-child(2) {...
Kevin Powell
CSS-Tricks
Equal Columns With Flexbox: It’s More Complicated Than You Might Th...
As awesome as flexbox is, what it’s doing under the hood is actually a little strange because, by default, it is doing two things at once. It first looks at the content size which is what we would get if by declaring width: max-content on an element. But on top of that, flex-shrink is also doing some work allowing the items to be smaller, but on...
2 Replies
Now i got to know about hypothetical main size which is clamped to 0 and its the one used in calculations. But then, the hypo main size of all items would just be 0 and so each item would get 200px and after padding, middle item would be 232px and would overflow the container.
And this https://stackoverflow.com/questions/64800033/how-exactly-is-calculated-hypothetical-main-size-of-flex-item-css-spec-questioques is about the same topic, but the answer is that the hypothetical main size would be +34px. But, if the paddings are subtracted from the flex-base size to calculate content size, why is it +34 and not -34?
Stack Overflow
How exactly is calculated hypothetical main size of flex item - CSS...
I have flex container with fixed width of 600px. Its flex item has flex-basis: 0 with 1px border and 16px padding. Based on spec flex base size of such item should be 0 (based on info in spec https...
can anyone help me?