Flex items shrink property

HTML-CSS
1

So I’m curious how the sizes of the flex items here are determined.
It says that a flex item with the value of 2 will shrink twice as much as ‘the other’, but the 1st flex item didn’t shrink at all, so 0 times 0 should be 0. Infact it only grew in size because the other one shrank, creating a paradox where the second flex item is waiting for the first one to shrink before it shrinks itself but it never shrinks.


<style>
#box-container {
  display: flex;
  height: 500px;
}
#box-1 {
  background-color: dodgerblue;
  width: 100%;
  height: 200px;
  flex-shrink: 1;
}

#box-2 {
  background-color: orangered;
  width: 100%;
  height: 200px;
  flex-shrink: 2;
}
</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/89.0.4389.128 Safari/537.36.

Challenge: Use the flex-shrink Property to Shrink Items

Link to the challenge:

2

Welcome @Sitka. By default flex-shrink is 1 which allows a box to shrink. Setting flex-shrink to 0 is a way to stop a box from shrinking meaning it will not go smaller than it’s set width.

Here is a useful article from FCC which explains flexbox nicely:

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.