What are `min-content` and `max-content` in CSS Intrinsic Sizing?

Intrinsic Sizing: Understanding min-content and max-content

CSS sizing level 3 introduces the concept of intrinsic dimensions, which are calculated based on the content within a box rather than its parent. min-content and max-content are intrinsic properties that determine the minimum and maximum dimensions of a box, respectively.

Intrinsic Dimensions vs. Extrinsic Dimensions

An extrinsic dimension of a box is derived from its parent box's dimensions, such as width: 80%. In contrast, intrinsic dimensions, such as width: min-content, are determined by the content within the box itself.

Defining min-content and max-content

min-content:

• The smallest possible width of a box that avoids content overflow.
• If the box contents were narrower, overflow would occur.

max-content:

• The "ideal" width of a box with unlimited available space.
• The box expands to fully accommodate its contents without unnecessary whitespace.

How are min-content and max-content Calculated?

To visualize min-content, consider a floating box (e.g., #red) within a wider containing box (e.g., #blue):

#blue { width: 0px; }
#red { float: left; }

The min-content width of #red equals its width when #blue's width is 0px, ensuring that #red's contents do not overflow.

Similarly, for max-content, visualize #red floating within a very wide #blue:

#blue { width: 99999999999999999px; } /* ~infinite */

The max-content width of #red equals its width when #blue's width is effectively infinite, allowing #red's contents to expand fully.

Additional Intrinsic Properties

Other intrinsic properties are currently under development, including fit-content and stretch. Stay tuned for future updates on their final definition and implementation.

The above is the detailed content of What are `min-content` and `max-content` in CSS Intrinsic Sizing?. For more information, please follow other related articles on the PHP Chinese website!