如何不使用JavaScript让父div超出窗口以包裹所有子元素？

嘿，我懂你的困扰——明明10个子元素总宽度加起来是2000px，但flex父容器却只和视窗一样宽，导致子元素横向溢出。其实不用JavaScript，纯CSS就能解决这个问题，核心是让父容器的宽度由子元素的总宽度决定，而不是被父级元素（比如body）的宽度限制。

问题根源 #

默认情况下，display: flex的容器是块级元素，它的宽度会自动撑满父元素（这里就是body，宽度等于视窗宽度）。哪怕子元素总宽度远超视窗，父容器也不会自动扩展，只会让子元素溢出。

解决方案1：使用width: fit-content #

给flex父容器添加width: fit-content属性，它会让容器的宽度刚好适配所有子元素的总宽度，完美包裹住它们：

/* 父容器样式 */
body > div { 
  display: flex; 
  flex-flow: row nowrap; 
  width: fit-content; /* 关键属性：让宽度适配子元素总宽度 */
}

/* 子元素样式 */
div > div { 
  width: 200px; 
  flex-shrink: 0; /* 禁止子元素收缩，保持200px宽度 */
  height: 200px; 
  background: red; 
  margin-right: 8px; /* 可选：添加间距让布局更清晰 */
}

解决方案2：改用display: inline-flex #

把父容器的display属性从flex改成inline-flex，这样容器就变成了行内块级元素，它的宽度会由子元素的总宽度决定，而不是撑满父级：

/* 父容器样式 */
body > div { 
  display: inline-flex; /* 改成行内flex容器 */
  flex-flow: row nowrap; 
}

/* 子元素样式和之前一致 */
div > div { 
  width: 200px; 
  flex-shrink: 0; 
  height: 200px; 
  background: red; 
  margin-right: 8px; 
}

小贴士：如果用inline-flex，建议给body添加overflow-x: auto，这样当父容器宽度超过视窗时，页面会出现横向滚动条，方便查看所有子元素。

兼容性说明 #

这两个方案的兼容性都很好，主流浏览器（Chrome、Firefox、Edge、Safari）都支持，不需要担心兼容性问题。

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