liveBook · Manning

Revised flex-grow algorithm

As explained in Math for Web Design

The revised flex-grow algorithm allocates each flex-grow value below one directly as a fraction of a flex container's free space when their total is below one.

When flex-grow values are all below 1 and their total is below 1, the browser treats each value as a direct fraction of the container’s free space, rather than as a relative ratio. section 5.2.4

Calculate the final item sizes in three steps:

Three 100px items in a 600px container

With flex-grow values of 0.1, 0.2, and 0.3, free space is 300px. The items receive 30px, 60px, and 90px, producing final widths of 130px, 160px, and 190px. The remaining 120px stays unused. section 5.2.4

How Math for Web Design covers it

How deep it goes
Works through the allocation formulas and contrasts them with the original ratio method and flex-shrink behavior.
Examples
Uses a 600px container with three 100px items and grow values of 0.1, 0.2, and 0.3.
What it assumes
Assumes flex containers, flex items, initial sizes, flex-basis, and basic subtraction and multiplication.
What you can do after
Apply it via CSS to predict flex-item widths and remaining unused space.
How it connects
Connects flex-grow with flex-basis, flex containers, free space, and flex-shrink.
Cover of Math for Web Design
liveBookmanning.com
Read Math for Web Design on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of Math for Web Design. The section links point to the parts of the book it draws on.