Flex item shrinking even with flex-shrink: 0

Question

The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container so when I give a flex-shrink of 0 it shouldn't shrink but it shrinks.

 #content { -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-items: stretch; align-items: stretch; } .box { flex-grow: 1; flex-shrink: 0; border: 3px solid rgba(0, 0, 0, .2); } .box1 { flex-grow: 1; flex-shrink: 0; border: 3px solid rgba(0, 0, 0, .2); } 

 <h4>it shinks with a flex-shrink of 0</h4> <div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:yellow;">C</div> <div class="box1" style="background-color:brown;">D</div> <div class="box1" style="background-color:lightgreen;">E</div> <div class="box" style="background-color:brown;">F</div> </div> 

Answer 1

You haven't specified enough width for the flex items to overflow the container ( nowrap ) or the line ( wrap ). Therefore, flex-shrink isn't being called into action. If the flex items are wide enough, they will overflow the container or wrap, and not shrink, as you expect.

 #content { display: flex; flex-flow: row wrap; } .box { flex: 1 0 150px; border: 3px solid rgba(0, 0, 0, .2); } .box1 { flex: 1 0 200px; border: 3px solid rgba(0, 0, 0, .2); } 

 <h4>it shinks with a flex-shrink of 0</h4> <div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:yellow;">C</div> <div class="box1" style="background-color:brown;">D</div> <div class="box1" style="background-color:lightgreen;">E</div> <div class="box" style="background-color:brown;">F</div> </div>