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.

…


This content originally appeared on DEV Community and was authored by alok-38

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.


This content originally appeared on DEV Community and was authored by alok-38


Print Share Comment Cite Upload Translate Updates
APA

alok-38 | Sciencx (2025-11-03T03:34:31+00:00) How the Flex-Basis Property Works in CSS Flexbox. Retrieved from https://www.scien.cx/2025/11/03/how-the-flex-basis-property-works-in-css-flexbox/

MLA
" » How the Flex-Basis Property Works in CSS Flexbox." alok-38 | Sciencx - Monday November 3, 2025, https://www.scien.cx/2025/11/03/how-the-flex-basis-property-works-in-css-flexbox/
HARVARD
alok-38 | Sciencx Monday November 3, 2025 » How the Flex-Basis Property Works in CSS Flexbox., viewed ,<https://www.scien.cx/2025/11/03/how-the-flex-basis-property-works-in-css-flexbox/>
VANCOUVER
alok-38 | Sciencx - » How the Flex-Basis Property Works in CSS Flexbox. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/11/03/how-the-flex-basis-property-works-in-css-flexbox/
CHICAGO
" » How the Flex-Basis Property Works in CSS Flexbox." alok-38 | Sciencx - Accessed . https://www.scien.cx/2025/11/03/how-the-flex-basis-property-works-in-css-flexbox/
IEEE
" » How the Flex-Basis Property Works in CSS Flexbox." alok-38 | Sciencx [Online]. Available: https://www.scien.cx/2025/11/03/how-the-flex-basis-property-works-in-css-flexbox/. [Accessed: ]
rf:citation
» How the Flex-Basis Property Works in CSS Flexbox | alok-38 | Sciencx | https://www.scien.cx/2025/11/03/how-the-flex-basis-property-works-in-css-flexbox/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts