使父 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>