flex-basis

Set the starting main-axis size before a flex item grows or shrinks.

Overview

Examples

Set the starting size of a flex item

flex-basis:* supplies the starting main-axis size before free space is distributed. This row uses a 96px basis and disables shrinkage on the sidebar; the other item fills the remainder.

<div id="layout" class="flex gap-md">  <div id="target" class="flex-basis:6rem flex-shrink:0 h:6rem p-sm">Sidebar</div>  <div id="peer" class="flex:1 h:6rem min-w:0 p-sm">Main content</div></div>

@layer utilities {  .flex-basis\:6rem {    flex-basis: 6rem  }  .flex-shrink\:0 {    flex-shrink: 0  }}

In horizontal writing, a row uses the basis as a starting width and a column uses it as a starting height. The final size can still be limited by min/max sizes and flexing.

Use content or parent-sized basis values

flex-basis:100% resolves to 100% of a definite container main size. flex-basis:fit-content and flex-basis:max-content resolve to the intrinsic keywords fit-content and max-content. These three rows keep the same content and disable growth and shrinkage so their starting sizes are easy to compare.

<div id="layout" class="flex">  <div id="target" class="flex-basis:100% flex-shrink:0 min-w:0 p-sm">Design library</div></div>

<div id="layout" class="flex">  <div id="target" class="flex-basis:fit-content flex-shrink:0 p-sm">Design library</div></div>

<div id="layout" class="flex">  <div id="target" class="flex-basis:max-content flex-shrink:0 p-sm">Design library</div></div>

Fit-content is bounded by the available space and the content’s minimum size. Max-content uses the unwrapped content width. With this short label, both intrinsic sizes can be equal. A percentage basis in a container with an indefinite main size instead falls back to content sizing.

Use container basis values

flex-basis-md reads the md token from the shared container scale. Its basis is 28rem in the default theme; the actual item may be smaller when the row needs to shrink. The adjacent 80px region stays fixed.

<div id="layout" class="flex gap-md">  <div id="target" class="flex-basis-md h:6rem min-w:0 p-sm">Container basis</div>  <div id="peer" class="flex:none h:6rem w:5rem p-sm">Main content</div></div>

A basis is a starting size, not a minimum width. The live size reading shows the resulting border box after the available width and the gap have been accounted for.

Prefer shorthand for complete flex behavior

Use flex when growth, shrinkage and the basis belong together. In this 240px-tall column, flex:0|0|4.5rem reserves a 72px header; the remaining region grows below it.

<div id="layout" class="flex flex-col gap-md h:15rem">  <div id="target" class="flex:0|0|4.5rem p-sm">72px header</div>  <div id="peer" class="flex:1 min-h:0 p-sm">Remaining height</div></div>

Apply conditionally

Use conditional queries to switch the basis at a viewport breakpoint. The first item occupies a full flex line by default; from sm, it takes a 96px basis and the content can share its row.

<div id="layout" class="flex flex-wrap gap-md">  <div id="target" class="flex-basis:100% flex-shrink:0 h:6rem p-sm flex-basis:6rem@sm">Sidebar</div>  <div id="peer" class="flex:1|1|8rem h:6rem min-w:0 p-sm">Main content</div></div>