Css 柔性箱容器宽度不小于'；成长

在默认行方向上使用flex box时，容器高度会增加，以包含所有flex项，即使它是绝对定位的

#container {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
}

#container > div {
  flex: 0 0 200px;
  height: 200px;
}

看

但是，如果将“弹性方向”更改为“列”，则容器将收缩到单个弹性项的宽度，即使这些项包裹到下一列上也是如此

#container {
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#container > div {
  flex: 0 0 200px;
  width: 200px;
}

看

---

如何使容器在

列
模式下包含所有flex项？
我想这就是您要寻找的CSS：

#container {
  display: flex;
  flex-flow: row wrap;
  border: 1px solid #f00;
  padding: 1px;
}

#container > * {
  border: 1px solid #555;
  background-color: #ccc;
  height: 200px;
  width: 200px;
  margin: 1px;
}

“容器”将始终显示其容器的宽度，在本例中为页面，但现在框将在其中正确调整

如果我误解了你的问题，请告诉我

更新

我已经玩了好几天了，你要我做什么，我真的不可能做到你要我做的。。。至少不是在你要求的方向上

容器的宽度要尽可能大。除非您强制容器为精确宽度，此时它不会是全宽，但也不会随内容的变化而变化。
我实际上已经找到了一个CSS唯一的解决方案，但它不是世界上最完美的东西。这是：

这里的技巧是创建一个
可见性：折叠的
容器。在flex中，
可见性：折叠的
对象将自身从正常的flex流中移除，但保留其尺寸以用于布局。这会将flex容器加宽到所需的宽度，但不会影响flex项目。然而，有几个警告：

这需要一些摆弄。正如您所看到的，magic
是一个设置的宽度，但它使用
：n个子项来确定前面有多少个框。如果您的实际设计在多于或少于3行时中断，则必须对此进行调整，并且必须调整对象的宽度

由于渲染错误，这在IE中不起作用。幸运的是，IE的不正确实现在没有任何更改的情况下完全满足了您的要求，因此您所要做的就是将自己的样式表与一些条件语句一起提供给IE，并拍摄
div.magic
一些好的旧
显示：none
HTML


.flex容器{
填充：0；
保证金：0；
列表样式：无；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
证明内容：周围的空间；
边框：1px实心#f00；
}
.弹性项目{
背景色：#ccc；
填充物：5px；
宽度：200px；
高度：150像素；
线高：150px；
颜色：白色；
字体大小：粗体；
字号：3em；
文本对齐：居中；
边框：1px实心#555；
}

1.
2.
3.
4.
5.
6.
7.
这与我的第一个示例不一样吗？我要寻找的是这种行为，但它是以列模式而不是行模式然后你会得到你的列模式，但我不认为这就是你要找的，因为它们都是垂直堆叠的，而在水平方向上什么也不做。通过这种方式，它们可以根据需要成为一列。但可能是这样。我已经在代码笔中的方框中添加了编号，以更好地说明我的意思。我认为这是唯一的方法，但将最大宽度设置为#容器。通过这种方式，您可以确定所需的最大列数并垂直拉伸内容。问题是关于
flex-direction:column
。请查看更新的代码笔。重复的，据我所知，
已折叠
collapse
是，但是您的
magic
div似乎可以使用或不使用
visibility
属性，这让我对这里发生的事情更加困惑。它的工作方式是div.magic本质上是在容器上设置一个“width”属性，但是，通过在子对象上设置它，您可以使用第n个子对象来使用CSS对子对象进行本质上的“计数”。这是一个非常粗糙的程序，只适用于你直接编码的元素数量，还涉及到对像素值的摆弄，直到你得到一些有用的东西——但它的简单和直截了当给我留下了深刻的印象。
<div id="container">
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="magic"></div>
</div>

#container {
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 1px solid #f00;
  height: 650px;
  padding: 1px;
}

#container div.fb {
  border: 1px solid #555;
  flex: 0 0 200px;
  background-color: #ccc;
  width: 200px;
  margin: 1px;
  height: 200px;
}

#container > div.magic {
  height: 0;
  margin: 0;
  padding: 0;
  visibility: collapsed;
}

#container > div.magic:nth-child(5),
#container > div.magic:nth-child(6),
#container > div.magic:nth-child(7) {
  width: 408px;
}

#container > div.magic:nth-child(8),
#container > div.magic:nth-child(9),
#container > div.magic:nth-child(10) {
  width: 612px;
}

#container > div.magic:nth-child(11),
#container > div.magic:nth-child(12),
#container > div.magic:nth-child(13) {
  width: 816px;
}