FAQ: Flexbox - flex-shrink

This community-built FAQ covers the “flex-shrink” exercise from the lesson “Flexbox”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

FAQs on the exercise flex-shrink

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

If the value of 2 is applied to both center boxes- one at top , and one at bottom- why wouldnt both of these boxes shrinked with the same size? I am confused!
@mtf please help.

In this exercise: https://www.codecademy.com/courses/learn-intermediate-css/lessons/learn-flexbox/exercises/flex-shrink

both the top center and the middle center have default flex-shrink value of 1. Why does the middle center shrink more than the top center?

The flex-shrink value specifies the factor/proportion by which an item should shrink. The flex-shrink value is not an absolute number but is a relative factor. In other words, the flex-shrink values of the sibling items will impact on what actually happens.

You are correct that both the .top.center and .middle.center have flex-shrink values of 1 (default). But you must look at the flex-shrink values of the sibling items as well to understand what will actually happen.

  • The .top.side items have been given a flex-shrink value of 2. The flex-shrink value of the .top.center item is 1. If there is need for the items to shrink, then you can think of it as chopping the shrinkage up into 5 equal parts. The left side item will shrink by 2 parts, the center item will shrink by 1 part and the right side item will shrink by 2 parts. So whatever shrinkage was necessary, 40% of the shrinkage will be absorbed by the left item, 20% by the center item and 40% by the right item.

  • The .middle.side items have been given a flex-shrink value of 0. The flex-shrink value of the .middle.center item is 1. If there is need for the items to shrink, then all the shrinking (100% of shrinkage) will have to be absorbed by the center item.

Even though both the center items have a flex-shrink value of 1, the flex-shrink values of the siblings are different. Because of the flex-shrink values of the siblings, the .top.center item only absorbs 20% of the shrinkage necessary. By contrast, the .middle.center item has to absorb 100% of the shrinkage necessary.

1 Like

Thank you so much! Now, it’s clear to me!

While making the exercise from Instructions section nothing changed in the view screen on the right. I added the values requested for flex-shink and nothing happend. Has anyone encounter this?

1 Like

You have to drag the window and move it sideways from left to right.