CSS中width: fit-content与width: 100%的区别是什么？

核心逻辑差异 #

• width: 100%：强制元素宽度完全匹配父容器的可用内容宽度，无视自身内容的实际长度，始终撑满父容器水平空间。
• width: fit-content：让元素宽度由内部内容的实际宽度决定，刚好包裹住内容，不会占用多余的父容器空间。

不同场景下的行为表现 #

场景1：内容长度短于父容器宽度 #

• width: 100%：元素会占满整个父容器宽度，内容默认居左，右侧留下大量空白区域。
• width: fit-content：元素宽度仅适配内容长度，仅占用内容所需的水平空间，剩余父容器空间保持空白。

场景2：内容长度长于父容器宽度 #

• width: 100%：元素宽度固定为父容器宽度，内容超出部分会默认溢出（可通过word-wrap、overflow等属性调整）。
• width: fit-content：元素宽度会跟随内容长度扩展，可能直接超出父容器边界，除非父容器设置了overflow限制或其他约束。

场景3：元素包含内边距/边框时 #

在默认的content-box盒模型下：

• width: 100%：元素的内容宽度等于父容器内容宽度，加上自身的padding和border后，总宽度会超出父容器，导致横向溢出。
• width: fit-content：元素的总宽度（内容+padding+border）刚好包裹住内容，不会出现无故溢出的情况。

代码示例对比 #

示例1：短内容场景 #

width: 100% 实现

<div style="width: 300px; border: 1px solid #ccc; padding: 8px;">
  <div style="width: 100%; background: #f5f5f5; padding: 6px;">
    这是一段短文本
  </div>
</div>

效果：内层div铺满300px父容器宽度，背景色覆盖整个水平区域。

width: fit-content 实现

<div style="width: 300px; border: 1px solid #ccc; padding: 8px;">
  <div style="width: fit-content; background: #f5f5f5; padding: 6px;">
    这是一段短文本
  </div>
</div>

效果：内层div宽度仅适配文本长度，背景色仅覆盖文本所在区域，右侧保留空白。

适用场景 #

• width: 100%：适用于需要元素撑满父容器的布局，比如页面头部导航栏、全屏卡片、表单输入框容器等。
• width: fit-content：适用于需要元素宽度自适应内容的场景，比如标签按钮、自适应弹窗、评论气泡等，避免多余空白影响视觉体验。

内容的提问来源于stack exchange，提问作者Michael Moreno