Flex-grow, Flex-shrink, Flex-basis - Precise Size Control

Welcome to the Alexandrian Library of Flexbox! Just as ancient librarians had to precisely arrange scrolls on shelves, we must precisely control the size of flex elements. Meet three of the most powerful properties: flex-grow, flex-shrink, and flex-basis.

Flex-basis - Initial Element Size

flex-basis

specifies the initial (base) size of an element BEFORE free space distribution.

1.item {
2  flex-basis: 200px;  /* Initial size 200px */
3}
4
5.item {
6  flex-basis: 0;  /* Ignore content size, start from 0 */
7}
8
9.item {
10  flex-basis: auto;  /* Use content size (default) */
11}
12
13.item {
14  flex-basis: 50%;  /* 50% of container */
15}

Difference between width and flex-basis:

1/* Width is rigid */
2.item {
3  width: 200px;  /* Always 200px */
4}
5
6/* Flex-basis is a suggestion */
7.item {
8  flex-basis: 200px;  /* About 200px, but can grow/shrink */
9}

Egyptian analogy: Flex-basis is like the initial size of a stone block before carving - it can be enlarged or reduced depending on the needs.

Flex-grow - Element Growth

flex-grow

determines how much an element can grow relative to other elements when there is free space.

1.container {
2  display: flex;
3  width: 600px;
4}
5
6.item-1 {
7  flex-grow: 1;  /* Will take 1 share of free space */
8  flex-basis: 100px;
9}
10
11.item-2 {
12  flex-grow: 2;  /* Will take 2 shares of free space */
13  flex-basis: 100px;
14}
15
16.item-3 {
17  flex-grow: 1;  /* Will take 1 share of free space */
18  flex-basis: 100px;
19}
20
21/* Free space: 600px - 300px = 300px
22   Sum of flex-grow: 1 + 2 + 1 = 4
23   
24   item-1: 100px + (300px x 1/4) = 175px
25   item-2: 100px + (300px x 2/4) = 250px
26   item-3: 100px + (300px x 1/4) = 175px
27*/

Values:

• flex-grow: 0

  - element does NOT grow (default)

• flex-grow: 1

  - element grows proportionally

• flex-grow: 2

  - element grows 2x faster than elements with flex-grow: 1

Practical example - layout with sidebar:

1.layout {
2  display: flex;
3}
4
5.sidebar {
6  flex-grow: 0;  /* Sidebar does NOT grow */
7  flex-basis: 250px;  /* Fixed size 250px */
8}
9
10.main-content {
11  flex-grow: 1;  /* Main content takes all remaining space */
12}
13
14.aside {
15  flex-grow: 0;  /* Aside does NOT grow */
16  flex-basis: 200px;
17}

Flex-shrink - Element Shrinking

flex-shrink

determines how much an element can shrink relative to others when there isn't enough space.

1.item {
2  flex-shrink: 1;  /* Element can shrink (default) */
3}
4
5.item-important {
6  flex-shrink: 0;  /* Element does NOT shrink */
7}
8
9.item-flexible {
10  flex-shrink: 3;  /* Element shrinks 3x faster than others */
11}

Example - behavior with limited space:

1.container {
2  display: flex;
3  width: 400px;
4}
5
6.item-1 {
7  flex-basis: 200px;
8  flex-shrink: 1;  /* Shrinks normally */
9}
10
11.item-2 {
12  flex-basis: 200px;
13  flex-shrink: 2;  /* Shrinks 2x faster */
14}
15
16.item-3 {
17  flex-basis: 200px;
18  flex-shrink: 0;  /* Does NOT shrink */
19}
20
21/* Total: 600px, but container is only 400px
22   Missing: 200px
23   
24   item-3 will remain 200px (flex-shrink: 0)
25   item-1 and item-2 will share shrinking proportionally
26*/

Practical usage - protecting important elements:

1.header-logo {
2  flex-shrink: 0;  /* Logo NEVER shrinks */
3  width: 150px;
4}
5
6.header-nav {
7  flex-shrink: 1;  /* Navigation can shrink */
8}
9
10.header-search {
11  flex-shrink: 2;  /* Search bar shrinks fastest */
12}

Flex Shorthand - Combining All Three

The

flex

property is a shorthand for

flex-grow

,

flex-shrink

, and

flex-basis

:

1/* flex: grow shrink basis */
2.item {
3  flex: 1 1 200px;
4  /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
5}

Most Common Flex Values:

1/* flex: 1 - flexible element */
2.item {
3  flex: 1;
4  /* Equivalent to: flex: 1 1 0 */
5  /* Grow, shrink, start from 0 */
6}
7
8/* flex: auto - natural size with flexibility */
9.item {
10  flex: auto;
11  /* Equivalent to: flex: 1 1 auto */
12  /* Grow, shrink, start from content size */
13}
14
15/* flex: none - rigid size */
16.item {
17  flex: none;
18  /* Equivalent to: flex: 0 0 auto */
19  /* Do NOT grow, do NOT shrink */
20}
21
22/* flex: 0 0 200px - absolutely rigid */
23.item {
24  flex: 0 0 200px;
25  /* Always 200px, no growing/shrinking */
26}
27
28/* flex: 2 - grow 2x faster */
29.item {
30  flex: 2;
31  /* Equivalent to: flex: 2 1 0 */
32}

Practical Examples

1. Dashboard layout - 3 columns

1<div class="dashboard">
2  <aside class="sidebar">Sidebar (fixed)</aside>
3  <main class="main-content">Main (flexible)</main>
4  <aside class="widgets">Widgets (fixed)</aside>
5</div>

1.dashboard {
2  display: flex;
3  gap: 20px;
4  height: 100vh;
5}
6
7.sidebar {
8  flex: 0 0 250px;  /* Fixed: 250px */
9  background: #34495e;
10}
11
12.main-content {
13  flex: 1;  /* Takes all remaining space */
14  background: white;
15  overflow-y: auto;
16}
17
18.widgets {
19  flex: 0 1 300px;  /* Preferred: 300px, can shrink */
20  background: #ecf0f1;
21}
22
23/* On small screens */
24@media (max-width: 768px) {
25  .dashboard {
26    flex-direction: column;
27  }
28  
29  .sidebar,
30  .widgets {
31    flex: 0 0 auto;  /* Automatic size */
32  }
33}

2. Responsive header

1<header class="header">
2  <div class="logo">Logo</div>
3  <nav class="nav">Navigation</nav>
4  <div class="search">Search</div>
5  <div class="user">User</div>
6</header>

1.header {
2  display: flex;
3  gap: 20px;
4  padding: 10px 20px;
5  background: #2c3e50;
6  align-items: center;
7}
8
9.logo {
10  flex: 0 0 150px;  /* Always 150px */
11}
12
13.nav {
14  flex: 1 1 auto;  /* Takes available space */
15  min-width: 0;  /* Important for shrinking */
16}
17
18.search {
19  flex: 0 1 300px;  /* Prefers 300px, can shrink */
20  min-width: 150px;  /* Minimum 150px */
21}
22
23.user {
24  flex: 0 0 100px;  /* Always 100px */
25}

3. Card grid with different sizes

1<div class="card-grid">
2  <div class="card small">Small</div>
3  <div class="card medium">Medium</div>
4  <div class="card large">Large</div>
5  <div class="card small">Small</div>
6</div>

1.card-grid {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 20px;
5}
6
7.card {
8  height: 200px;
9  background: #3498db;
10  color: white;
11  display: flex;
12  align-items: center;
13  justify-content: center;
14}
15
16.card.small {
17  flex: 0 0 calc(25% - 15px);  /* 1/4 width minus gap */
18}
19
20.card.medium {
21  flex: 0 0 calc(50% - 10px);  /* 1/2 width minus gap */
22}
23
24.card.large {
25  flex: 0 0 100%;  /* Full width */
26}
27
28@media (max-width: 768px) {
29  .card.small,
30  .card.medium {
31    flex: 0 0 100%;  /* Full width on mobile */
32  }
33}

Debugging Flexbox

Common Problems and Solutions:

Problem 1: Element doesn't grow

1/* Problem */
2.item {
3  flex-grow: 1;
4  width: 200px;  /* Width blocks growing! */
5}
6
7/* Solution */
8.item {
9  flex: 1;  /* flex automatically overrides width */
10  /* or */
11  flex-grow: 1;
12  min-width: 200px;  /* Use min-width instead of width */
13}

Problem 2: Element doesn't shrink

1/* Problem */
2.item {
3  flex-shrink: 1;
4  min-width: 300px;  /* min-width prevents shrinking! */
5}
6
7/* Solution */
8.item {
9  flex-shrink: 1;
10  min-width: 0;  /* Allow shrinking */
11}

Problem 3: Text overflows the container

1/* Problem */
2.item {
3  flex: 1;
4  /* Long text can push the element outside the container */
5}
6
7/* Solution */
8.item {
9  flex: 1;
10  min-width: 0;  /* Crucial! */
11  overflow: hidden;
12  text-overflow: ellipsis;
13  white-space: nowrap;
14}

Summary

flex-basis:

• Initial element size
• Can be px, %, auto, 0
• Similar to width, but flexible

flex-grow:

• How much an element grows
• 0 = doesn't grow (default)
• 1+ = grows proportionally

flex-shrink:

• How much an element shrinks
• 0 = doesn't shrink
• 1+ = shrinks proportionally (default: 1)

flex shorthand:

• flex: 1

  = flexible, starts from 0

• flex: auto

  = flexible, starts from content size

• flex: none

  = rigid size

• flex: 0 0 200px

  = always 200px

Remember: Flex-grow, flex-shrink, and flex-basis are like the pharaoh's orders for pyramid builders - they precisely specify which blocks should be larger, which smaller, and which must remain unchanged!