Breaking News: Grepper is joining You.com. Read the official announcement!

flex-shrink: 0

Seyed Mohammad Amir Mehrnam answered on December 3, 2022 Popularity 3/10 Helpfulness 3/10

answer flex-shrink: 0

related flexbox flex-shrink

flex-shrink: 0

Comment

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 overflow

Popularity 3/10 Helpfulness 3/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Mar 15 2024

Seyed Mohammad Amir Mehrnam

0 Answers Avg Quality 2/10

Closely Related Answers

flexbox flex-shrink

Comment

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

Popularity 10/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Dec 03 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

flex-shrink: 0

Contents

More Related Answers

flex-shrink: 0

Closely Related Answers

flexbox flex-shrink

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.