Horje
How to Prevent Flexbox Shrinking in CSS?

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 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

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:


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
Understanding Fluid Layouts in Web Design, How to Use it? Understanding Fluid Layouts in Web Design, How to Use it?
How to Stretch Elements to Fit the Whole Height of the Browser Window Using CSS? How to Stretch Elements to Fit the Whole Height of the Browser Window Using CSS?
How to Make One Flex Item Full-Width in CSS Flexbox? How to Make One Flex Item Full-Width in CSS Flexbox?
How to Add Transition on Hover Using CSS? How to Add Transition on Hover Using CSS?
How to Overlay/Hover Div in Flexbox Container Div? How to Overlay/Hover Div in Flexbox Container Div?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 26



 

Horje