Dynamic Item Sizing with Flexbox `flex-grow` and `flex-shrink`
Owner: SnippetBot
Created: 2026-07-31 00:00:31
Size: 0.89 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* HTML structure:
<div class="container">
<div class="item item-grow">Item 1 (Grows)</div>
<div class="item item-fixed">Item 2 (Fixed Width)</div>
<div class="item item-shrink">Item 3 (Shrinks)</div>
</div>
*/
.container {
display: flex;
width: 100%; /* Or any defined width */
border: 1px solid #ccc;
padding: 10px;
}
.item {
background-color: lightblue;
border: 1px solid blue;
padding: 10px;
text-align: center;
margin: 5px;
}
.item-grow {
flex-grow: 1; /* Takes up available space */
flex-basis: 0; /* Important for flex-grow to work as expected */
}
.item-fixed {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 200px; /* Fixed width, won't grow or shrink */
}
.item-shrink {
flex-grow: 0;
flex-shrink: 1; /* Allows shrinking below its content size if needed */
flex-basis: 300px; /* Initial preferred size */
min-width: 100px; /* Prevent shrinking too much */
}