CSS问题：max-width导致父元素出现多余间距

问题原因 #

inline-block元素的width: auto是基于子元素的**首选宽度（preferred width）**计算的。你给子元素设置了width: 5000px，这就成了它的首选宽度——哪怕max-width限制了它的实际渲染宽度，浏览器计算父元素尺寸时依然会参考这个大的首选宽度，导致父元素被撑开并出现右侧空白。

解决方案 #

以下是几种可行的修复方式，按需选择：

方法1：给子元素的直接父容器添加overflow: hidden

给中间的.wrapper-2设置overflow: hidden，让它强制尊重子元素的实际渲染宽度（而非首选宽度），进而让外层的.wrapper-1只占用必要空间：

.wrapper-1{
  display: inline-block;
  width: auto;
  background-color: blue;
}
.wrapper-2 {
  overflow: hidden; /* 关键属性 */
}
.hello-world{
  display: inline-block;
  width: 5000px;
  max-width: min(100px, 100%);
  background-color: yellow;
}

方法2：用width直接替代max-width的限制逻辑

如果不需要保留width: 5000px的设置，直接把width设为min(100px, 100%)，这样子元素的首选宽度就是实际需要的尺寸，父元素自然不会被撑开：

.hello-world{
  display: inline-block;
  width: min(100px, 100%); /* 直接设置计算后的宽度 */
  background-color: yellow;
}

方法3：给父元素添加contain: size

使用CSS的contain属性强制父元素基于子元素的实际渲染尺寸计算自身大小，忽略子元素的首选宽度：

.wrapper-1{
  display: inline-block;
  width: auto;
  background-color: blue;
  contain: size; /* 关键属性 */
}

验证效果 #

以上三种方法都能让.wrapper-1的宽度贴合.hello-world的实际渲染宽度（100px），消除右侧空白。

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