内容自适应宽度

这些值常用于让元素宽度由内容参与决定，而不是单纯写死固定宽度。

max-content

宽度等于内容在不主动换行时所需的最大宽度。

Lorem ipsum dolor sit amet consectetur adipisicing

Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum dolor sit amet consectetur adipisicing

min-content

宽度等于内容尽可能收缩后的最小宽度。

Lorem ipsum dolor sit amet consectetur adipisicing

Lorem ipsum dolor sit amet consectetur adipisicing

fit-content

根据实际内容进行伸缩，但不会无限制溢出可用空间。

Lorem ipsum dolor sit amet consectetur adipisicing

Lorem ipsum dolor sit amet consectetur adipisicingLorem ipsum dolor sit amet consectetur adipisicing

Lorem ipsum

怎么理解

• max-content：尽量不换行，能有多宽就多宽。
• min-content：尽量压缩，必要时强制换行。
• fit-content：在内容尺寸和可用空间之间取一个平衡。

常见场景

• 标签、徽标、按钮等随内容变化宽度的组件。
• 需要让文本块按内容收缩，但又不希望无限撑开的场景。
• Grid 布局中控制轨道尺寸时的内容驱动宽度计算。