.profile { display: flex; } .avatar { flex-shrink: 0; }The avatar keeps its width while text uses the remaining space.
LESSON 58 OF 100
Protect an item from shrinking
Keep the avatar size when text needs space.
STEP 1 · LEARN
How it works
flex-shrink defines how much an item’s main size can be reduced when the line lacks space. A value of 0 excludes the avatar from negative free-space distribution.
.profile { display: flex; } .avatar { flex-shrink: 1; }A value of 1 lets the avatar shrink with the other items.
STEP 2 · APPLY
Your exercise
Enable Flexbox on the profile and prevent the avatar from shrinking.
index.htmlCSS
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK
What needs to pass
0%not checked
- ○The profile is a flex container.
- ○The avatar does not participate in shrinking.
- ○The target element is present in the page.
Explain the solution logic
The flex container resolves available space, and flex-shrink: 0 preserves the avatar’s main size.