Shrink
Flex shrinking is the Flexbox behavior that reduces flex-item sizes and distributes insufficient space according to shrink factors and size constraints.
Web Design Playground
A flexbox sizing behavior that determines how a flex item reduces in size when space is limited.
- How it is used
- Controls how flex items surrender space when a container lacks room.
- How deep it goes
- Explains default and custom values with practical effects, while deferring the detailed shrink calculation.
- Examples
- Uses 300px items in a 600px container, a header logo, and thumbnail-list images.
- What you can do after
- Apply it via CSS Flexbox to protect images or logos while neighboring content adjusts.
Math for Web Design
The flex shrinking algorithm is the Flexbox procedure for distributing negative free space among shrinkable flex items according to their flex-shrink factors and size constraints.
- How it is used
- Explains how Flexbox resolves container overflow by reducing flex-item main sizes.
- How deep it goes
- Works through weighted overflow allocation and min-width redistribution, without presenting broader specification internals.
- Examples
- Uses three 450px items in a 600px container and a constrained 100px minimum-width variation.
- What you can do after
- Diagnose/debug with it by calculating which flex items shrink and checking constraints or shorthand overrides.
Web Design Playground, Second Edition
The CSS flex-shrink property specifies how much a flex item may contract relative to the other flex items when insufficient space is available.
- How it is used
- Controls how flex items surrender space when a container lacks room.
- How deep it goes
- Explains default and custom values with a minimum-content limit, while deferring complicated unequal-width calculations.
- Examples
- Demonstrates a thumbnail list that prevents its image wrapper from shrinking while its text entry grows.
- What you can do after
- Apply it via CSS to protect selected flex items or make them yield more space.
Read how Web Design Playground, Second Edition explains shrink →
CSS in Depth, Second Edition
The CSS flex-shrink property specifies a flex item's shrink factor when the flex items' initial sizes exceed the available space in the flex container.
- How it is used
- Prevents flex layouts from overflowing when initial item sizes exceed the container’s available main-axis space.
- How deep it goes
- Explains zero and positive factors, proportional contraction, initial-size effects, gaps, padding, and column-direction constraints.
- Examples
- Demonstrates two percentage-based columns separated by a gap and nested tiles in a vertical flexbox.
- What you can do after
- Build it from scratch by choosing shrink factors for columns and predicting when constrained flex items will contract.
Related concepts
- flexconfigured by · The CSS flex property is a shorthand that sets a flex item’s flex-grow, flex-shrink, and flex-basis values.
- flexboxused by · Flexbox is a CSS one-dimensional layout model for arranging, sizing, aligning, and distributing items along a row or column.
- flex itemuses · A flex item is a child of a flex container that participates in its flexible layout.
- overflowaddressed by · Content overflow is the condition in which content extends beyond the bounds of its containing box or viewport.
- flex-basisuses · The CSS flex-basis property specifies a flex item’s initial size along the flex container’s main axis before available space is distributed.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.