How to Prevent Flexbox Shrinking in CSS?

Last Updated : 18 Oct, 2024

The Flexbox is a powerful layout module in CSS that makes it easy to design flexible and responsive layouts. However, one common issue that developers face is preventing the flex items from shrinking.

The Flexbox or the Flexible Box Layout is a layout model that allows elements within the container to be automatically arranged based on certain rules. One of the key features of the Flexbox is the ability to control how items grow and shrink. By default, flex items will shrink to fit the container which can sometimes lead to unintended layouts.

These are the different approaches to preventing flex items from shrinking:

Table of Content

Using flex-shrink Property
Using flex Property
Using min-width Property

Using flex-shrink Property

The flex-shrink property specifies the shrink factor of the flex item. By setting this property to 0 we can prevent the item from shrinking.

Syntax:

.item {    
flex-shrink: 0;
}

Example: In this example, we have a flex container with the three items. Setting flex-shrink: 0 on each item prevents them from shrinking.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <style>
        .container {
            display: flex;
            width: 300px;
            border: 1px solid #000;
        }

        .item {
            flex-shrink: 0;
            width: 200px;
            background-color: lightblue;
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>

</html>

Output:

Using flex Property

The flex shorthand property can be used to the set the flex-grow, flex-shrink and flex-basis properties. By setting flex-shrink to the 0 using the shorthand we can prevent shrinking.

Syntax:

.item {    
flex: 1 0 auto;
}

Example: This example demonstrates how to use the flex shorthand to the prevent shrinking while allowing the item to grow.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <style>
        .container {
            display: flex;
            width: 300px;
            border: 1px solid #000;
        }

        .item {
            flex: 1 0 auto;
            background-color: lightgreen;
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>

</html>

Output:

Using min-width Property

The min-width property can be used to the prevent a flex item from the shrinking below a certain width.

Syntax:

.item {    
min-width: 200px;
}

Example: In this example, the min-width property the ensures that flex items do not shrink below 200px.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <style>
        .container {
            display: flex;
            width: 300px;
            border: 1px solid #000;
        }

        .item {
            min-width: 100px;
            background-color: lightcoral;
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>

</html>

Output:

How CSS Positioning and Flexbox Work?

gururaj69bn

Improve

Article Tags :

How to Prevent Flexbox Shrinking in CSS?

Using flex-shrink Property

Syntax:

Using flex Property

Syntax:

Using min-width Property

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?