Gotcha: Child Item Widths in a Flex Row

Default Child Widths (Content-Based)

Short

Medium Content

Looooooooonger Content Item

When the parent has `flex`, child items by default only take up the horizontal space required by their content. The flex container itself might be wider (here, `w-full`), but the children don't automatically expand to fill it. This is part of the "items might not take up full width if you expect them to" gotcha.

Solution 1: Using `flex-grow` on Children

Item 1 (flex-grow)

Item 2 (flex-grow)

Item 3 (flex-grow)

By adding `flex-grow` to the child items, they will expand to fill the available horizontal space in the flex container equally (if all have `flex-grow` without a specific grow factor).

Solution 2: Using Explicit Widths on Children

Item A (w-1/3)

Item B (w-1/3)

Item C (w-1/3)

Alternatively, you can assign explicit widths to child items using utilities like `w-1/3`, `w-1/2`, `w-auto`, etc. This gives you control over how much space each item occupies. Be mindful of combined widths and margins/paddings.