Question

虽然这听起来像一个非常简单的问题，但我没有找到一种方法来不使用Javascript。

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

使父div超出窗口以包装所有子项

1 个答案: