Proposal: A New white-space Value for Opting Out of Intrinsic Size Contribution #12955
Description
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.