How to wrap an element with more content in flexbox container to have the same width as other elements in CSS ?

Last Updated : 28 Mar, 2023

In a flexbox container, we might have a scenario where you want to wrap an element with more content, such as text or an image, to have the same width as other elements. In this article, we will see how to wrap an element with more content in a flexbox container to have the same width as other elements using CSS.

The flexbox or flexible box model in CSS is a one-dimensional layout model that has flexible and efficient layouts with distributed spaces among items to control their alignment structure. When describing the flexbox in one dimension, then it means the flexbox is described with the layout in one dimension at a time, i.e., either defined as a row or as a column. If the flexbox is described in two dimensions, then it controls columns and rows together.

Syntax:

.flex-container {
     display: flex;
}
.flex-item {
     flex: 1;
}
.wrapped-element {
     flex-wrap: wrap;
     max-width: 100%;
}

Approach: This can be accomplished in 2 ways:

Set the max-width of the wrapped element to 100%: When an element’s content exceeds its width, it will overflow, by default. By setting the max-width of the wrapped element to 100%, it will force the element to wrap its content to fit within its parent container. This approach is useful when you have a single element that needs to wrap its content.

Example 1: This example describes wrapping an element with more content in a flexbox container having the same width in CSS. Here, we have used the flex property to set the length of flexible items & set the max-width to 100%.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .flex-container { 
            display: flex; 
        } 
  
        .flex-item { 
            flex: 1; 
            background-color: lightblue; 
            padding: 10px; 
        } 
  
        .wrapped-element { 
            max-width: 100%; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        Wrapping an element with more  
        content in flexbox container  
        to have the same width as  
        other elements 
    </h3> 
  
    <div class="flex-container"> 
        <div class="flex-item"> 
            Element 1 
        </div> 
          
        <div class="flex-item wrapped-element"> 
            Element 2 with longer content  
            that needs to be wrapped 
        </div> 
          
        <div class="flex-item">Element 3</div> 
    </div> 
</body> 
  
</html>

Output:

Use the flex-wrap property to wrap the element: By setting the flex-wrap property to wrap on the parent container, you can ensure that all child elements, including the wrapped element, wrap their content when they exceed their width. This approach is useful when you have multiple elements that need to wrap their content.

Example 2: This is another example that describes wrapping an element with more content in a flexbox container having the same width in CSS. Here, we have used the flex-wrap property that specifies whether flex items are forced into a single line or wrapped onto multiple lines.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  
    <style> 
        .flex-container { 
            display: flex; 
            flex-wrap: wrap; 
        } 
  
        .flex-item { 
            flex: 1; 
            background-color: lightblue; 
            padding: 10px; 
        } 
  
        .wrapped-element { 
            max-width: 100%; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3> 
        Wrapping an element with more  
        content in flexbox container  
        to have the same width as  
        other elements 
    </h3> 
  
    <div class="flex-container"> 
        <div class="flex-item"> 
            Element 1 with longer content  
            that needs to be wrapped 
        </div> 
  
        <div class="flex-item wrapped-element"> 
            Element 2 with even longer content  
            that needs to be wrapped 
        </div> 
          
        <div class="flex-item"> 
            Element 3 with long content that  
            needs to be wrapped 
        </div> 
    </div> 
</body> 
  
</html>