The flex base size is a flex item’s starting main-axis size, before Flexbox distributes free space by growing or shrinking items. In a row container it means width; in a column container it means height. section 5.1
The browser determines the base size in this order:
- Use a specific flex-basis value directly, including a length, percentage, content, max-content, min-content, or fit-content. section 5.1.1
- When flex-basis is auto, use the item’s width on a horizontal main axis if width is declared. section 5.1.1
- When flex-basis is auto and width is absent, measure the item’s intrinsic content size. section 5.1.1
Why flex-basis overrides width
With flex-basis: 100px and width: 200px, the item starts at 100px because the explicit flex-basis value overrides width. The browser then totals the items’ base sizes, compares that total with the container, and decides whether growing or shrinking is required. section 5.1.1
