CSS布局疑问：父元素宽度为何小于子元素且未与子元素宽度一致

嗨，这个问题其实是块级元素的默认宽度规则在“搞事情”哦！你之前的认知其实有个小前提——只有当子元素宽度不超过父元素的包含块（通常就是浏览器视口）宽度时，父元素才会看起来和子元素宽度一致，但一旦子元素宽度超出视口，情况就不一样啦。

咱们来拆解下背后的逻辑：

• 你的div1是默认的块级元素，它的默认宽度是width: auto，这个值的计算逻辑是填充包含块的可用宽度（也就是当前浏览器视口的宽度），而不是被子元素的宽度“撑开”。
• 当你给div2设置了width: 4000px，这个宽度远大于视口宽度时，div1依然只会老老实实占满视口宽度，而div2会直接超出父元素的范围显示，这是块级元素的默认行为哦。

如果想验证这一点，你可以给div1加上overflow-x: scroll，就能看到div1内部的div2确实是完整的4000px宽，只是div1本身还是保持视口宽度而已。

要是你想让父元素div1和子元素div2宽度完全一致，有几个简单的解决方案：

• 方案一：使用width: fit-content：这个CSS属性会让元素宽度刚好包裹住子元素的内容，完美匹配子元素宽度
• 方案二：改变父元素的display类型：比如设置display: inline-block或者display: flex，这两类元素的默认宽度会由子元素撑开

下面是方案一的代码示例：

.div1 {
  background: blue;
  height: 200px;
  width: fit-content; /* 关键属性 */
}

.div2 {
  background: red;
  height: 100px;
  width: 4000px;
}

方案二的代码示例（以inline-block为例）：

.div1 {
  background: blue;
  height: 200px;
  display: inline-block; /* 关键属性 */
}

.div2 {
  background: red;
  height: 100px;
  width: 4000px;
}

备注：内容来源于stack exchange，提问作者mike234