Why a flex item will not shrink in CSS

Every flex item has an automatic minimum size, and it is the reason your text overflows.

.toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.toolbar .title {
  flex: 1 1 0;
  /* without this, a long title refuses to truncate */
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toolbar .actions { flex: 0 0 auto; }
.toolbar .search { flex: 0 1 18rem; }

How it works

1. flex: 1 sets grow, shrink and a basis of 0 in one value.
2. An item will not shrink below its content unless min-width: 0.
3. flex-basis is the starting size, before growing or shrinking.

Keywords and builtins used here

• actions
• display
• flex
• gap
• overflow
• rem
• search
• title
• toolbar

The run, in numbers

Lines

17

Characters to type

310

Tokens

71

Three-star pace

80 tpm

At the three-star pace of 80 tokens a minute, this run takes about 53 seconds.

Type this snippet

Step 5 of 6 in Flexbox, step 5 of 24 in Flexbox & grid.

← Previous Next →