Flex-shrink working in an unexpected way

HTML-CSS
1

I’m really confused with how flex-shrink works in this code:

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

how is it possible for flex-shrink to work when both box-1 and box-2 have enough space, and while the flex-container is not smaller then the combined width of the flex-items, box-1 and box-2.

I thought that flex-items only shrink when the flex-containers width is smaller then the compined width of the flex-items within it.

Thanks for reading :slight_smile:

2

Literally just learnt this yesterday so take my words with a grain of salt

Width of #box-1 and #box-2 is 100%

What this means is that their width is equal to the width of the parent element (As percentage takes reference from the size of the parent element), which is in this case #box-container

Thus, assuming that #box-container has a width of 300px,

width of #box-1 = 300px
width of #box-2= 300px

Total width = 600px

Hope I got it right

1 Like
3

Bro, your brilliant