[csswg-drafts] [css-flexbox][css-sizing] Clarify intrinsic size calculation for flex items containing floated descendants with flow-root siblings (#13418)

Kinmfer has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-flexbox][css-sizing] Clarify intrinsic size calculation for flex items containing floated descendants with flow-root siblings ==

## Problem Description

When a flex item (with `width: auto`) contains floated elements alongside `display: flow-root` siblings, browsers calculate different intrinsic widths:

- **Chrome/Blink**: Narrower width (394px in test case)
- **Firefox/Gecko**: Wider width (441px in test case)
- **Difference**: 47px

This suggests the specification may be ambiguous about how to calculate the intrinsic size of a flex item when its contents use float + flow-root layout.



## Test Results

| Browser | Form Width | Controls Width | Difference |
|---------|------------|----------------|------------|
| Chrome 131 | 394px | 339px | baseline |
| Firefox 134 | 441px | 386px | +47px |

## Analysis

The 47px difference corresponds to the width of the longest floated label ("Phone Number" + padding). This suggests:

- **Firefox**: Includes floated element widths in the flex item's max-content calculation
- **Chrome**: Does not include floated element widths (only considers the flow-root block's intrinsic size)

## Questions for the Working Group

1. When calculating the intrinsic main size of a flex item, should the calculation include the width of floated descendants?

2. Specifically, for a structure like:
   ```
   flex-item (width: auto)
     └── row
           ├── float: left (e.g., 55px)
           └── display: flow-root (contains width: 100% input)
   ```
   Should the flex item's max-content width be:
   - **(A)** The flow-root block's intrinsic width only, OR
   - **(B)** The floated element's width + the flow-root block's intrinsic width?

3. Is this a case where the specification needs clarification, or is one browser's behavior non-conformant?

## Related Specifications

- [CSS Flexbox Level 1 - §9 Flex Container Intrinsic Sizes](https://drafts.csswg.org/css-flexbox/#intrinsic-sizes)
- [CSS Sizing Level 3 - §5 Intrinsic Size Determination](https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes)
- [CSS Display Level 3 - flow-root](https://drafts.csswg.org/css-display/#valdef-display-flow-root)

## Real-World Impact

This issue was discovered in [TDesign](https://tdesign.tencent.com/), a popular UI component library. Their Form component uses `float: left` for labels and `display: flow-root` for form controls, causing visible layout differences between Firefox and Chrome on their documentation site.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13418 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 30 January 2026 09:11:22 UTC