Tring to practise in shrink property

[esraaessammohammed4]

**i try to find why the shrink property dosen’t give me the output .
i give it vaule to 0 to make this item doesn’t shrink **

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

  }

  #box-2 {
    background-color: orangered;
    width: 100%;
    height: 200px;
    

  }
</style>

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

**and wh? it give me this output

**

[im59138]

maybe it’s the width, 100% means that it takes as much space as it can

[esraaessammohammed4]

i don’t understand what you mean
what i understand that one i give a shrink vaule
take the total width and which i give 0 value to not shrink disappear

[Mando]

Refer to this link for more information about the flex-shrink property.
I believe in most cases you want to avoid defining flex-shrink:0;