Flex Shorthand: behaviour for flex: 2 2 150px and 1 1 150px;

HTML-CSS
1

Tell us what’s happening:

I have passed the challenge, but I don’t understand the behavior.
box-1 is set to {flex: 2 2 150px;} and box-2 to {flex: 1 1 150px;}
In my understanding the box sizes have to behave as follows:

  1. viewport of 300px - boxes get equal size - checks out;
  2. viewports of over 300px - box sizes gradually arrive and stay at 2:1 ratio - checks out;
  3. viewports of under 300px - box sizes gradually arrive and stay at 1:2 ratio - doesn’t check out. At some point box-1 shrinks into nothing. How is that the behaviour for {flex-shrink: 2;} ? Isn’t box-1 supposed to occupy at least 1/3 of the viewport?

Your code so far


<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    flex: 2 2 150px;
    height: 200px;
  }

  #box-2 {
    background-color: orangered;
    flex: 1 1 150px;
    height: 200px;
  }
  #checker {
    background-color: lime;
    height: 50px;
    width: 300px;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/css-flexbox/use-the-flex-shorthand-property

2

Hi @aYo11 and welcome to the community!

Next time you have questions about flex I sugegst you check this article from CSS Tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

It has all uses of every flex command, I suggest you check it because I think it has the answer for your question!

3

Thank you for the awesome guide! Unfortunately, it it didn’t answer my question, neither did another article of this resource: https://css-tricks.com/almanac/properties/f/flex-shrink/

The challenge has two items with flex-shrink set to 2 for Bluebox and 1 for Redbox. This should result in Bluebox shrinking twice as narrow as Redbox. And it does at some point. And as the viewport gets even smaller, Bluebox shrinks beyond 50% of Redbox and gradually shrinks to zero and disappears.

As documented: “flex-shrink determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn’t enough space on the row”. This behaviour just doesn’t add up with that.

flex-shrink-2-almost-zero
flex-shrink-2-almost-zero1195×551 42.8 KB

Thank you anyway! I hope your day rocks!

1 Like
4

flex-shrink: 2 means that it will shrink twice the amount that flex-shrink: 1 elements shrink. If the red box has shrunk by 10px, then the blue will shrink by 20px. Once it gets to the point where the red box has shrunk 75px (half of its flex-basis), then the blue one will have shrunk twice that: 150px, effectively reducing its width to zero.

flex-shrink doesn’t guarantee a 1:2 ratio for their widths. Just how fast they shrink relative to each other.

Try playing with it with Firefox’s devtools open. It has a nice tool for visualizing flex properties.

1 Like
5

Thank you so much! I wish this explanation was in the course. Now I see I got relative size change the wrong way around. You just made my life so much easier.
May the Force be with you!