(I will also mention it on Github, but I think it belongs here, since it is not a bug. Lesson title: ‘CSS Flexbox: Use the flex Shorthand Property’)
According to the instructions:
According to the instructions <if container>300px> then <the proportion of the width will be 2:1>. It doesn’t seem to be the case. I played with the code a bit and it seems that only the ‘available’ width will distribute in a proportion of 2:1. Here is a screen shot of my experiment (in which I used different px values for technical reasons. )
strong text
Of course the same principle applies to the flex-shrink value.
1 Like
Yep, the material presented here is incorrect and your observation is correct. It seems like they forgot to consider flex-basis. Perhaps, someone incorrectly interpreted or carelessly described the example from CSS-trick. I think you should probably report the issue.
To elaborate, consider two cases where 1) container width is smaller than the sum of each box’s flex-basis and 2) container width is greater than the sum of each box’s flex-basis
- Suppose container width is 180px and the flex-basis of both boxes are 120px. Assume other properties remain the same.
The amount that will be distributed is
container - sum(box1, box2) = 180px - 2(120px) =-60px
Based on flex-shrink property that has been defined, we split this amount to 1: 2
-60 * 1/3 : -60 * 2/3 = -20px : -40px
Then, the width of each boxes is
box1 = 120px - 20px = 100px
box2 = 120px - 40px = 80px
As we see, box1 is cleary not half the size of box2.
- Suppose container width is 300px and the flex-basis of both boxes are 120px. Assume other properties remain the same.
The amount that will be distributed is
300px - 2(120px) = 60px
Based on flex-grow ratio of each box, 1 : 2
60 * 1/3 : 60 * 2/3 = 20px : 40px
The width of each boxes is
box1 = 120px + 20px = 140px
box2 = 120px + 40px = 160px
Again, box1 is not twice the size of box2.
Thanks @gunhoo93 for your response and explenation.
