Flex-shrink :0
In this article, we will see what happens if we set CSS flex-shrink property to 0 for flex items. Flex shrink defines the ability for flex items to shrink if necessary. The default value of flex-shrink is 1. However, the flex shrink factor again is still relative to the other items in the container. So, let’s understand with examples.
Example:
HTML:
<div id="container">
<div class="item item-1">Item 1</div>
<div class="item item-2">Item 2</div>
<div class="item item-3">Item 3</div>
<div class="item item-4">Item 4</div>
<div class="item item-5">Item 5</div>
</div>
CSS:
#container{
border: 2px black solid;
display: flex; }
.item{
width: 50px;
padding: 1px;}
.item-1{
background-color: red; }
.item-2{
background-color: green; }
.item-3{
background-color: orange; }
.item-4{
background-color: darkviolet; }
.item-5{
background-color: yellow; }
Output:
Steps:
- Here, we have created a parent <div> flex container and inside it we have created 5 flex items. So, see the output of the flex items displayed inside the flex container.
- The first point to make note of is that flex-shrink is set to a value of 1 by default for every single flex item. That is why, If I try to reduce the width of the parent container the flex items shrink to fit inside the container like in the below picture.
- The shrinking is possible only up to a certain point after which the items simply overflow as in the below picture.
- If you don’t want shrinking happening on the flex items, you can simply set the flex-shrink property to value 0. After done correctly, the flex items won’t be shrinking
.item{ flex-shrink: 0; }