How to Get divs to Fill up 100% of the Container Width without Wrapping in CSS Flexbox?

Last Updated : 08 Aug, 2024

Creating a layout where <<div>> elements fill the full width of their container without wrapping can be a little complex in web design. CSS flexbox makes this easier by allowing us to control the alignment and sizing of elements. In this article, we are going to discuss how to use Flexbox to achieve this layout.

Flexbox is a powerful CSS layout module designed to align and distribute space among items in a container. One of its functions is managing the width of elements in a way that prevents them from wrapping onto a new line. If we need multiple <<div>> elements to span the full width of their container and stay in a single row, we can use Flexbox.

Below are different approaches to make sure that our <div> elements stretch to fill the container's width without wrapping:

Table of Content

Using Flexbox with flex-grow Property
Using Flexbox with flex Property
Using Flexbox with flex-basis Property

Using Flexbox with flex-grow Property

The flex-grow property allows flex items to grow and fill up the remaining space in the container. By setting this property, we ensure that all flex items take up equal space within the container.

Syntax:

.container {
  display: flex;
}
.item {
  flex-grow: 1;
}

Example: In this example, the <<div>> elements inside the container will stretch to fill the entire width of the container equally, with no wrapping.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
        }

        .item {
            flex-grow: 1;
            background-color: lightblue;
            margin: 5px;
            padding: 10px;
            text-align: center;
        }
    </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 Flexbox with flex Property

The flex shorthand property can be used to set flex-grow, flex-shrink, and flex-basis in one line. This is another way to make sure that items occupy the full width of the container without wrapping.

Syntax:

.container {
  display: flex;
}
.item {
  flex: 1;
}

Example: In this example, each item will equally share the container’s width, stretching to fill the space and remaining in a single row.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
        }

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

<body>
    <div class="container">
        <div class="item">Item A</div>
        <div class="item">Item B</div>
        <div class="item">Item C</div>
    </div>
</body>

</html>

Output:

flex-property — Using Flexbox with flex Property

Using Flexbox with flex-basis Property

The flex-basis property defines the initial size of a flex item before any space distribution happens. By setting flex-basis to 0, we ensure that the items can stretch to fill the available space.

Syntax:

.container {
  display: flex;
}
.item {
  flex-basis: 0;
  flex-grow: 1;
}

Example: Each <<div>> will expand to fill the container’s width, evenly distributing the space and staying on the same line.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
        }

        .item {
            flex-basis: 0;
            flex-grow: 1;
            background-color: lightcoral;
            margin: 5px;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">Box X</div>
        <div class="item">Box Y</div>
        <div class="item">Box Z</div>
    </div>
</body>

</html>

Output:

Conclusion

We can use CSS Flexbox to get <<div>> elements to fill 100% of the container width without wrapping, this is a simple and efficient method. By using properties such as flex-grow, flex, and flex-basis, we can control the layout of our items easily.