flexbox flex-shrink
flexbox flex-shrink
xxxxxxxxxxby default flex-shrink is 1 so when flex-item don't have enough spacein 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 */}Source: Grepper
Closely Related Answers
xxxxxxxxxxflex-shrink: 0; The element will not shrink,it will retain the width it needs, and not wrap its content.Its siblings will shrink to give space to the target element.Because the target element will not wrap its content,there is a chance for the flexbox container's content to overflowSource: Grepper
xxxxxxxxxx<!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>Source: Grepper
xxxxxxxxxx.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. */}Source: www.codecademy.com
Twitter 
LinkedIn