height: fit-content;
元素会收缩自己的高度，直到刚好能装下所有文字、图片等子元素为止，既不会多出一块空白，也不会把内容挤出去
常见使用场景常见使用场景
1.配合绝对定位实现居中
当你把一个元素设为绝对定位（position: absolute），又想让它上下左右居中时，通常需要设置 top: 0; bottom: 0; margin: auto;。但前提是这个元素必须有明确的高度。此时加上 height: fit-content，就能让不定高度的元素完美居中。
2.卡片或标签布局
在制作商品卡片、聊天泡泡或标签时，希望背景色或边框只包裹住文字，不多占空间，fit-content 就非常实用。
常见的坑
虽然它很好用，但在实际开发中有两个常见的失效场景：
在 Flex 布局中经常"失效"
如果你在一个 Flex 容器里给子元素设置 height: fit-content，经常会发现它没反应，子元素依然被拉得很长。
原因：Flex 子元素的默认对齐方式是 align-items: stretch（拉伸），这个拉伸的优先级比 fit-content 高，会强制把子元素拉满容器的高度。
解决办法：给这个子元素加上 align-self: flex-start（取消拉伸），它就能正常收缩了。
不支持 CSS 过渡动画（transition）
如果你想实现一个"鼠标悬停时盒子平滑展开"的动画效果，height: fit-content 是做不到的。