CSS
Flex Item to Fill Remaining Space
Learn how to make a specific item within a Flexbox container automatically expand to occupy all available remaining space, perfect for layouts like chat interfaces or dashboards.
.flex-container {
display: flex;
height: 200px; /* Example height for demonstration */
border: 1px solid #ccc;
background-color: #f9f9f9;
padding: 10px;
}
.fixed-item {
width: 100px;
background-color: lightblue;
padding: 10px;
color: #333;
display: flex;
align-items: center;
}
.stretching-item {
flex-grow: 1; /* This item will grow to fill available space */
background-color: lightgreen;
padding: 10px;
color: #333;
display: flex;
align-items: center;
}
.another-fixed-item {
width: 80px;
background-color: lightcoral;
padding: 10px;
color: #333;
display: flex;
align-items: center;
}
How it works: This Flexbox snippet demonstrates how to make one item fill all remaining space. By applying `display: flex` to the container, its children become flex items. The `flex-grow: 1` property on the `.stretching-item` tells it to grow and absorb any extra space not taken by its siblings. Items without `flex-grow` (or with `flex-grow: 0`, the default) will only take up their intrinsic content width or explicitly set width.