Description
https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes defines the min-content and max-content sizes as the "preferred minimum width" and "preferred width" from CSS2: https://drafts.csswg.org/css2/#float-width
calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2 does not define the exact algorithm.
There seems to be the assumption that the min-content size can't exceed the max-content size.
For example, CSS Grid has a note stating
min-content contribution ≤ max-content contribution
However, consider this case:
<!DOCTYPE html>
<style>span { display: inline-block; margin-right: -50px }</style>
<div style="width: min-content; border: solid">aaaaaaaaaaaa<span></span></div>
<div style="width: max-content; border: solid">aaaaaaaaaaaa<span></span></div>When we avoid wrapping lines as per max-content, then the negative margin of the span makes the line shorter than when wrapping lines as per min-content! Browsers don't agree:
- Firefox just allows
min-contentto be bigger thanmax-content - Blink ceils the min-content to not exceed the max-content
- WebKit floors the max-content to be at least as big as the min-content (not really, see next comment)
- Servo is currently like Firefox but in a bunch of places we assume
min-content <= max-content, leading to assert failures. I plan to align with WebKit for now, since typically in case of conflict CSS tends to choose the maximum amount.
| Firefox, Servo | Blink | WebKit |
|---|---|---|
 |
 |
 |