width与max-width差异疑问：卡片设max-width:100%未按预期扩展

核心结论 #

你遇到的是max-width的预期行为，而非副作用。两者的差异源于width:100%和max-width:100%的本质区别：

• width:100%：强制元素宽度等于父容器的100%，忽略内部内容的宽度约束
• max-width:100%：仅限制元素的最大宽度不能超过父容器，但元素的实际宽度由内部内容的最小宽度决定（块级元素默认宽度为auto，即由内容撑开）

你的代码场景拆解 #

在你的实现中：

1. .card是块级元素，默认宽度为auto，添加max-width:100%后，它的宽度只会被限制在父容器范围内，但实际宽度由内部的大字体标题、padding等内容的最小宽度决定。
2. 图片设置了width:100%，会自适应卡片的宽度，而非反过来让卡片适配图片的原始尺寸（你的示例图片原始尺寸为50x50，远小于文本内容撑开的宽度）。

这就导致卡片不会自动撑满父容器，只会扩展到内部内容所需的最小宽度，同时不超过父容器的100%宽度上限。

针对性解决方法 #

根据你的需求，可选择以下方案调整：

方案1：让卡片自适应内容同时不超过父容器 #

使用min()函数结合fit-content，既保证最大宽度不超出父容器，又能让卡片宽度贴合内部内容：

.card {
  background: var(--clr-white);
  width: min(100%, fit-content);
  max-width: 100%;
  border-radius: 0.5rem; /* 合并圆角样式更简洁 */
}

方案2：让卡片宽度由图片主导 #

如果希望卡片宽度跟随图片尺寸，给图片容器设置fit-content宽度，再让卡片继承该宽度：

.card-img {
  width: fit-content;
}
.card {
  background: var(--clr-white);
  width: fit-content;
  max-width: 100%;
  border-radius: 0.5rem;
}

方案3：强制卡片默认撑满父容器 #

如果需要卡片默认填满父容器，同时保留max-width的限制（在小屏幕上可收缩），可以结合width:100%和min-width：

.card {
  background: var(--clr-white);
  width: 100%;
  max-width: 100%;
  min-width: fit-content; /* 可选：避免小屏幕上内容挤压 */
  border-radius: 0.5rem;
}

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