[Beta] Mistake in the Flexbok lesson

[Beta] Mistake in the Flexbok lesson
0

#1

(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.


Responsive web design principles and CSS Flexbox questions, resources, and discussion (January. 2018 Cohort)
#2

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

  1. 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.

  1. 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.


#3

Thanks @gunhoo93 for your response and explenation.