Flex盒容器宽度不会增长

Question

在默认行方向上使用弹性框时,容器高度会增加以包含所有弹性项,即使它是绝对定位的.

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

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

请参阅http://codepen.io/tamlyn/pen/dPjLoN/?editors=110

但是,如果将flex方向更改为column,则容器将折叠到单个flex项的宽度,即使这些项包装到下一列也是如此.

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

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

见http://codepen.io/tamlyn/pen/rarbeN?editors=110

如何使容器包含column模式中的所有弹性项目？

Answer 1

我认为这就是您正在寻找的 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;
}

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

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

更新

我已经研究你要求的东西好几天了，看起来确实不可能做你要求的事情......至少不能按照你要求的方向做。

容器希望成为可能的最大宽度。除非您强制容器具有精确的宽度，否则它不会是完整宽度，但它也不会随着弯曲内容而弯曲。