Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Make container shrink-to-fit child elements as they wrap in HTML
Making a container shrink-to-fit its child elements as they wrap is a common CSS layout challenge. This technique ensures that the container only takes up as much width as needed by its content, rather than stretching to fill the available space. We achieve this using CSS Flexbox properties combined with proper container sizing.
How It Works
The key to making a container shrink-to-fit is using display: inline-flex or display: flex with width: fit-content. The inline-flex display value makes the flex container behave like an inline element, automatically sizing to its content width.
When child elements wrap using flex-wrap: wrap, the container adjusts its dimensions to accommodate the wrapped content without taking up unnecessary space.
Syntax
Following are the key CSS properties for creating a shrink-to-fit flex container
.container {
display: inline-flex; /* or display: flex with width: fit-content */
flex-wrap: wrap;
/* other styling properties */
}
Method 1 Using inline-flex
The inline-flex display property creates a flex container that shrinks to fit its content automatically
<!DOCTYPE html>
<html>
<head>
<title>Shrink-to-fit with inline-flex</title>
<style>
.container {
display: inline-flex;
flex-wrap: wrap;
border: 3px solid red;
padding: 10px;
margin: 20px;
}
.item {
border: 2px solid orange;
margin: 5px;
padding: 15px;
width: 120px;
text-align: center;
background-color: #f0f8ff;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="container">
<div class="item">Item A</div>
<div class="item">Item B</div>
<div class="item">Item C</div>
<div class="item">Item D</div>
<div class="item">Item E</div>
</div>
</body>
</html>
The container automatically sizes to fit the wrapped items without taking full width
[Red bordered container containing wrapped items A, B, C, D, E in orange boxes] Container width adjusts to content, not full page width
Method 2 Using flex with fit-content
Alternatively, you can use display: flex combined with width: fit-content to achieve the same result
<!DOCTYPE html>
<html>
<head>
<title>Shrink-to-fit with fit-content</title>
<style>
.shrink-container {
display: flex;
flex-wrap: wrap;
width: fit-content;
border: 3px solid blue;
padding: 10px;
margin: 20px;
}
.box {
border: 2px solid green;
margin: 5px;
padding: 15px;
width: 100px;
text-align: center;
background-color: #f5f5dc;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="shrink-container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
</div>
</body>
</html>
The container with width: fit-content behaves similarly to inline-flex, wrapping content and sizing appropriately
[Blue bordered container with green boxes wrapped to fit content width]
Method 3 List Items with Shrink-to-fit
Here's a practical example using an unordered list where the container shrinks to fit the wrapped list items
<!DOCTYPE html>
<html>
<head>
<title>Shrink-to-fit List Container</title>
<style>
.list-container {
display: inline-flex;
flex-wrap: wrap;
margin: 0;
padding: 15px;
border: 3px solid purple;
list-style-type: none;
}
.list-container li {
border: 2px solid orange;
margin: 8px;
padding: 12px;
width: 80px;
text-align: center;
background-color: #fff8dc;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<ul class="list-container">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</ul>
</body>
</html>
The list container automatically adjusts its width based on how the items wrap, creating a compact layout
[Purple bordered list with orange letter boxes A-H wrapped to fit container]
Comparison of Methods
Here's a comparison of different approaches to achieve shrink-to-fit behavior
| Method | CSS Property | Browser Support | Best Use Case |
|---|---|---|---|
| inline-flex | display: inline-flex |
Excellent (IE 10+) | Simple shrink-to-fit containers |
| flex + fit-content | display: flex; width: fit-content |
Good (IE not supported) | When you need block-level behavior |
| inline-block + flex |
display: inline-block wrapper |
Excellent | Legacy browser compatibility |
Key Points
-
display: inline-flexautomatically creates a shrink-to-fit container -
flex-wrap: wrapallows child elements to wrap to new lines -
width: fit-contentwithdisplay: flexprovides an alternative approach -
The container width adjusts based on content, not available space
-
Borders and padding help visualize the shrink-to-fit behavior
Conclusion
Making containers shrink-to-fit their wrapping child elements is achieved primarily through display: inline-flex combined with flex-wrap: wrap. This creates responsive layouts where containers only occupy the space needed by their content, rather than stretching to fill available width. The technique is particularly useful for navigation menus, tag lists, and flexible card layouts.
1K+ Views
