How the Flex-Basis Property Works in CSS Flexbox

When working with Flexbox layouts, you might want one element — like a sidebar — to stay fixed while another area stretches to fill the rest. The flex shorthand property lets you control that with precision. Here’s how flex: 0 0 255px achieves it.

What flex: 0 0 255px Means

flex: 0 0 255px; /* sidebar stays fixed */

Broken down:

flex-grow: 0 → the sidebar will not grow to take up extra space.

flex-shrink: 0 → the sidebar will not shrink if the container gets smaller.

flex-basis: 255px → the sidebar’s starting (and effectively final) width is 255px.

Before and After Example

Before applying flex: 0 0 255px

After applying it

In summary

• flex-grow: 0 prevents the sidebar from expanding.

• flex-shrink: 0 prevents it from collapsing.

• flex-basis: 255px sets its exact width.