By default, flex items only take up as much space as their content needs. If you want them to fill the available space, you need to use utility classes like
flex-grow
or specific width classes (e.g.,
w-1/3
).
flex-grow
to fill space
Applying
flex-grow
to child items allows them to expand and fill available horizontal space.
w-1/3
)
You can also assign specific widths to children. For this to work as expected in a flex row where you want them to sit side-by-side and sum up to the full width, ensure they don't overflow (or use
flex-shrink-0
if you don't want them to shrink).
flex-grow
on children to make them expand and take available space.
w-full
,
w-1/2
, etc., on children if you need specific proportional widths. Be mindful of margins/paddings affecting the total width.