[csswg-drafts] Proposal: A New white-space Value for Opting Out of Intrinsic Size Contribution (#12955)

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

== Proposal: A New white-space Value for Opting Out of Intrinsic Size Contribution ==
### Introduction & Motivation

A common and challenging layout scenario in CSS involves a "shrink-to-fit" container (e.g., width: fit-content) with multiple children, where the author intends for only some of those children to determine the container's final width. The other children should be "slaves" to the layout, wrapping their content to fit the width dictated by their siblings, not by their own content.

I propose a new keyword value for the **white-space** property: _brittle_, _yield_ or _conform_

An element with white-space: brittle; signals to the layout engine that its content should not contribute to the intrinsic inline-size calculation of its containing block. It effectively tells the element to "break at the slightest constraint."

### Key Behaviors:

- Intrinsic Sizing: When a parent element with a shrink-to-fit width (width: fit-content, width: min-content, or an unconstrained flex/grid item) calculates its size, it will treat any child with white-space: brittle; as having a minimum content contribution of 0.
- Document Flow: The element remains fully in-flow. It respects margins, takes up vertical space, and affects the position of subsequent siblings. It is not floated or absolutely positioned.
- Wrapping: The element's content (text) will wrap to fit the final, computed width of its parent container. This width will have been determined by other constraints, such as an explicit width on the parent or the intrinsic size of its non-brittle sibling elements.

### Example Use Case

Consider a fieldset that should size itself to a short "driver" element, while a longer "slave" element with descriptive text should wrap within that size.

HTML:

```
<html>
<fieldset>
  <div class="description">This is a long line of descriptive text that should be a slave to the layout and not drive the width.</div>
  <div class="driver">This is the driver.</div>
</fieldset>
```

CSS:

```
fieldset {
  width: fit-content;
  border: 1px solid;
  padding: 1em;
}

.description {
  /* The new property in action! */
  white-space: brittle; 
  background: #eee;
}

.driver {
  /* This element behaves normally and sets the parent's width. */
  font-weight: bold;
}
```

Result: The <fieldset> will become exactly wide enough to contain "This is the driver.". The .description div will then be constrained to that width, causing its long line of text to wrap naturally. This is achieved without any floats, absolute positioning, or extra wrappers.

### Conclusion

The introduction of white-space: brittle; would solve a long-standing, frustrating layout problem with an elegant, declarative solution. It would improve developer ergonomics, lead to more robust and readable code, and fill a critical missing piece in the CSS layout model.


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


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

Received on Wednesday, 15 October 2025 22:00:52 UTC