.container { display: flex; } .item-a { flex-shrink: 1; /* The value 1 indicates that the item should shrink. */ } .item-b { flex-shrink: 2; /* The value 2 indicates that the item should shrink twice than the element item-a. */ }<!DOCTYPE html> <html> <head> <title>flex-shrink</title> <style> body { width: 400px; display: flex; } div { border: 1px solid black; flex-basis: 100px; } .item1 { flex-shrink: 5; } .item2 { flex-shrink: 1; }.item3 { flex-shrink: 2; }.item4 { flex-shrink: 2; }.item5 { flex-shrink: 2; } </style> </head> <body> <div class="item1">item1</div> <div class="item2">item2</div> <div class="item3">item3</div> <div class="item4">item4</div> <div class="item5">item5</div> </body> </html> by default flex-shrink is 1 so when flex-item don't have enough space in flex container then width descrease. .flex-item {flex-shrink:0 } or flex-shrink: 10 will decrease that item 10 times. it will not shrink and items are overflow when there is no space. .flex-container {display:flex;} .flex-item{ width:300px; flex-shrink:0; /*it will not shrink */} .flex-item-2{flex-shrink:10; /*only item 2 will shrink by 10 times */}