flex-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 overflowby 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 */}