在开发中遇到一个非常奇怪的情况，本意是希望fit-content实现元素收缩效果的同时，保持原本的block状态。但是却遇到了 fit-content 超出父组件 的问题。（fit-content MDN）
结合代码，如下，可以看到右半部分超出了绿色的父组件；表象原因非常简单，就是和flex一起使用了；
更深的原因是：Flex布局的默认行为和fit-content的特性密切相关。
一、fit-content的本质特性
fit-content会根据内容自动计算宽度，其具体表现为：
- 基准值：
fit-content = min(max-content, max(min-content, 可用空间)) - 效果：元素宽度会根据内容自动收缩或扩展，但不会超过父容器的可用空间。
代码中，.fit-content设置了min-width: fit-content，这意味着：
- 最小宽度被锁定为内容所需的最小宽度（即
min-content）； - 最大宽度受父容器可用空间限制（理论上不会超出父容器）。
二、Flex布局的默认行为冲突
父容器#container使用Flex布局（display: flex），且未显式设置flex-wrap（默认nowrap），这会触发以下关键机制：
-
子项收缩优先级：
- Flex子项默认
flex-shrink: 1，允许在空间不足时缩小； - 但通过
min-width: fit-content，子项的最小宽度被设定为内容所需的最小宽度，阻止了进一步收缩。
- Flex子项默认
-
空间分配矛盾：
- 父容器宽度为300px，两个子项均设置
flex: auto（等价于flex: 1 1 auto）； - 当
.fit-content的内容宽度（min-content）超过剩余空间时，Flex容器会优先满足min-width约束，导致溢出。
- 父容器宽度为300px，两个子项均设置
三、代码的具体分析
.fit-content {
min-width: fit-content; /* 锁定最小宽度为内容最小需求 */
flex: auto; /* flex-grow:1 + flex-shrink:1 + flex-basis:auto */
}
-
内容宽度计算：
.fit-content中的长文本包含连续字母和数字，默认不会换行，导致min-content宽度较大（接近文本的物理长度）。
-
Flex容器空间分配：
- 父容器总宽度300px，两个子项通过
flex: auto均分剩余空间； - 当
.fit-content的min-content超过分配到的空间时，Flex布局会优先满足min-width约束，导致内容溢出。
- 父容器总宽度300px，两个子项通过
