如何制作伸展以适合包装物品的Flexbox容器？

Question

我想要一个flex-direction: column;个flexbox容器，其宽度增长以适应包含的元素。

In this codepen:

灰色div是flexbox容器，红色div包含在内部，并使用flexbox布置在列中。灰色div需要扩展/收缩其宽度以完美地包含红色子div。这可能吗？

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 290px;
  align-content: flex-start;
  padding: 2px;
  background: grey;
}
.child {
  background: red;
  width: 100px;
  height: 100px;
  margin: 2px;
}

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer 1

您没有设置父元素的宽度行为。将 .container 显示属性设置为内联块，并为每个 .row 元素添加display：flex属性。

＆＃13;

＆＃13;

.container {
  display: inline-block;
  max-height: 290px;
  padding: 2px;
  background: grey;
}
.row{
  display:flex;
}
.child {
  background: red;
  width: 100px;
  height: 100px;
  margin: 2px;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="row">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

“解决方案”

我轻易使用术语解决方案，因为如果没有像Tomas建议的这样的固定行（即不将HTML改为更传统的风格），疯狂很难做到，或者一般没有一些高度的黑客攻击。此外，除非完成2行并且不能可靠地减小包含div，否则高度减半;评论孩子7，看看会发生什么。然后，当你还取消注释时，它会看到它恢复到“正常”状态。

I have been messing around for an hour or so and the best I can come up with is in this fiddle.

---

我想提供一些背景

默认flex-flow为row nowrap，这会在足够幸运的元素上设置一定宽度x以接收该规则。在这种情况下，似乎将flex-flow更改为column 不会重置该元素上定义的宽度x。该元素的宽度为x，就好像它是flex-flow: row nowrap一样（请亲自尝试）。

有一大堆宽度继承问题源于此，我们无法设置flex-basis属性（这并不意味着我认为这样做）所以我们需要将所有内容包装在另一个元素中{{1}我们可以在其上定义宽度，并将实际的列样式放在.container元素上。但是，.row也不会缩小。最好我们使用.container（ing）元素在宽度上正确定义我们的列，以便自己完成它。

因此，我们需要一个伪元素.container来为背景提供正确的宽度，包括一些::after和margin黑客以模拟填充。

我可以输入更多内容，但我认为这根本不是一个可行的解决方案，实际上只是一个不能很好地完成的“证明”。

如果你想添加更多的行，你必须将宽度从50％改为2（1/2），再改变为3％（1/3）等33％...它不像编辑那样可扩展HTML本身。

总而言之，有一个只有2行的工作演示，但目前看来这似乎不符合当前的HTML标记结构。