自适应内部元素

难题

在 CSS 中，默认情况下，块级元素的宽度是其父容器的 100%。然而，我们经常需要让一个容器的宽度能够根据其内部的内容自适应。

最常见的场景是：一个带有标题的图片。我们希望容器的宽度由图片的宽度决定，而标题文字（如果较长）则应该在图片宽度范围内自动换行，而不是把容器无限撑宽。

虽然可以通过 display: inline-block 让容器收缩到内容宽度，但它会让容器的宽度完全随内容变化。如果文字非常长，容器就会变得非常宽，甚至超出父容器，而不是限制在图片的固有宽度内。

解决方案

CSS3 引入了几个新的关键字，用于更精确地控制元素的 width 和 height，使我们能够轻松实现“内部决定大小”的效果：fill-available | fit-content | min-content | max-content。

属性详解

-webkit-fill-available

作用

撑满可用空间。它的行为类似于块级元素的默认行为（width: 100%），但它的价值在于可以应用于非块级元素。

价值

它可以应用在 inline-block 元素上，使其在保持行内特性的同时，依然能像块级元素一样占满剩余空间。

提示：在高度上使用 -webkit-fill-available 还可以非常方便地实现等高布局，使元素填满剩余的高度空间。

min-content

作用

采用内部元素的“最小固有宽度”作为容器宽度。

最小宽度定义

• 图片/视频：其本身的固有宽度。
• 中文文本：单个汉字的宽度。
• 英文文本：最长单词的宽度（因为默认不拆分单词）。

场景

解决“图片决定父级容器宽度”的经典难题。

max-content

作用

采用内部元素的“最大固有宽度”作为容器宽度。

效果

如果内部有长文本，它会强制文本不换行，直到达到其内容本身的最大宽度（即所有内容都在同一行显示的宽度）。

fit-content

作用

智能自适应内容宽度。它在 min-content 和 max-content 之间动态取值。

逻辑

• 容器宽度 = max(min-content, min(max-content, available-width))
• 简单来说：它会尽可能撑开到 max-content，但不会超过可用空间；同时它最小不会小于 min-content。

场景

常用于水平居中且宽度随内容变化的按钮、提示框等。