为何窗口缩小时body及.container无法占满宽度且容器溢出？

一、块级元素的默认宽度行为 #

块级元素默认的width值是auto，并非固定的100%视口宽度。auto的作用是填充父元素的可用水平空间——也就是父元素包含块的宽度，减去自身的内边距、边框、外边距后剩下的空间。

当块级元素的父元素是html或body时，初始状态下html/body的包含块是浏览器视口，所以块级元素会填满视口宽度。但如果子元素宽度超过父元素的包含块宽度，html/body不会自动扩展宽度——因为它们的width同样是auto，只会以视口为基准，不会跟随溢出的子元素拉伸。

二、.container不跟随子元素宽度扩展的原因 #

你给.container设置了width: 1200px的固定宽度，这意味着它的宽度被硬限制为1200px，无论内部子元素的宽度多大，容器本身的宽度都不会改变。

只有当容器的宽度属性为auto，或者使用inline-block、table、width: fit-content这类具备“收缩包裹”或“自适应内容”特性的属性时，容器才会跟随内部子元素的宽度自动扩展。固定宽度的优先级最高，会完全忽略子元素的尺寸。

三、窗口缩小后的溢出与body宽度问题 #

当视口宽度小于1200px时：

• .container的实际宽度仍为1200px，但由于html/body的宽度仅等于当前视口宽度，容器会溢出到视口外部；
• body不会扩展到子元素（.container）的宽度，因为body的width: auto是以视口为包含块，它只会适应视口宽度，不会因为子元素溢出而拉伸。

四、可选解决方案 #

如果想让.container既保持最小1200px宽度，又能跟随子元素扩展：

.container {
  min-width: 1200px;
  width: fit-content;
  margin: 0 auto;
}

如果想让body跟随.container的宽度，避免容器部分内容“消失”在视口外：

html, body {
  min-width: 1200px;
}

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