Example 3: Gotcha - Flex Item Sizing

This example demonstrates how flex items behave by default and how to make them grow using `flex-grow`.

Default Behavior: Items Take Content Width

Without explicit width or grow utilities, flex items only take up the space their content needs.

Short

Medium Content

Looooooooonger Content Item

Using `flex-grow` on Children

The `flex-grow` utility allows flex items to expand and fill available space in the flex container.

Item 1 (flex-grow)

Item 2 (no grow)

Item 3 (flex-grow)

Gotcha Point:

Flex items won't automatically take up the full width or distribute space unless you instruct them to. Use `flex-grow` on child items if you want them to expand and fill available horizontal space in the flex container. Alternatively, explicit width utilities like `w-1/2`, `w-1/3` etc., can be used on children, but `flex-grow` is key for responsive distribution of *remaining* space.