html - 使父 div 扩展到窗口之外以包裹所有子项

Question

虽然这听起来像是一个很容易解决的问题，但我还没有找到不使用 Javascript 的方法。

考虑这个例子:https://jsfiddle.net/oopssam8/1/

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

div > div {
  width: 200px;
  flex-shrink: 0;
  height: 200px;
  background: red;
}

body > div {
  display: flex;
  flex-flow: row nowrap;
}

如您所见，红色框扩展到窗口之外。每个盒子都是 200px 宽，所以当检查它们的父级时，我希望看到 2000px 的宽度(有 10 个红色盒子)。父 div 的计算宽度不会超出窗口宽度。

有什么方法可以让父 div 扩展到窗口之外并包裹所有子元素吗？

Answer 1

您可以将容器 div 的宽度值设置为:width: fit-content;(带有额外的供应商前缀，如下例所示)

这是工作示例:

div > div {
  width: 200px;
  flex-shrink: 0;
  height: 200px;
  background: red;
}

body > div {
  display: flex;
  flex-flow: row nowrap;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>