你用过 CSS fit-content 吗

height: fit-content 是 CSS 中一个非常有用的属性值，它根据元素内容自动调整高度，实现「包裹内容」的效果。

核心概念

1. 作用原理：
   浏览器会计算元素的：

   • 内容固有高度（文本/子元素等）
   • 内边距（padding）
   • 边框（border）
     然后自动设置一个刚好包含这些内容的最小高度。

2. 对比其他高度属性：

   div {
     height: auto; /* 高度完全由内容决定（可能溢出容器） */
     height: fit-content; /* 内容高度，但不超过可用空间 */
     height: max-content; /* 允许超出容器（不换行/不收缩） */
     height: min-content; /* 收缩到最小可能宽度下的高度 */
   }

视觉示例

<div style="border: 2px solid blue; width: 200px;">
  <p style="height: fit-content; background: pink;">
    这段文本会撑开粉色区域，但不会超过200px宽度
  </p>
</div>

效果：粉色背景区域会精确包裹文本内容，同时遵守父容器宽度限制（自动换行）。

典型使用场景

1. 自适应高度卡片：

   .card {
     height: fit-content;
     width: 300px;
     padding: 16px;
     border-radius: 8px;
   }

2. 按钮/标签动态高度：

   .tag {
     height: fit-content;
     min-width: 40px;
     padding: 4px 8px;
   }

3. 与浮动元素配合：

   .clearfix {
     height: fit-content; /* 替代 overflow: hidden */
   }

浏览器兼容性

• Chrome 支持版本 | 46+
• Firefox 支持版本 | 3+
• Safari 支持版本 | 10.1+
• Edge 支持版本 | 79+
• iOS Safari 支持版本 | 10.3+
• Android Chrome 支持版本 | 47+

兼容写法：

.element {
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
}

注意事项

1. 与 overflow 的交互：
   如果内容超出 fit-content 计算的高度，overflow: visible 会导致内容溢出。

2. 性能影响：
   比 height: auto 多一次布局计算，但对性能影响极小。

3. Flex/Grid 布局中的表现：
   在弹性布局中，fit-content 会尊重父容器的约束条件：

   .grid-container {
     display: grid;
     grid-template-rows: fit-content(100px); /* 最大高度限制 */
   }

对比其他 CSS 尺寸关键字

• fit-content 内容高度，但不超过可用空间
• max-content 按内容最大可能高度显示
• min-content 收缩到内容最小高度（如单行文字）

实际应用示例

/* 聊天消息气泡 */
.message {
  max-width: 70%;
  height: fit-content;
  padding: 12px;
  border-radius: 18px;
  background: #e3f2fd;
}

/* 动态高度的侧边栏 */
.sidebar {
  width: 250px;
  height: fit-content;
  position: sticky;
  top: 20px;
}

height: fit-content 特别适合需要内容包裹性但又需要遵守布局约束的场景，比传统的 auto 更可控。