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

Question

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

在这个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

“解决方案”

我很少使用术语“解决方案”，因为如果没有像 Tomas 建议的固定行（即不将 HTML 更改为更传统的样式），或者通常不需要某种高度的黑客攻击，这是非常困难的。此外，除非已完成 2 行并且包含的​​ div 的大小无法可靠地减小，否则高度会减半；注释掉 child 7 看看会发生什么。然后，当您也取消注释 8 时，会发现它恢复到“正常”。

我已经搞砸了一个小时左右，我能想到的最好的就是这个小提琴。

我想提供一些背景知识

默认值为flex-flow，这会在有幸接收该规则的元素上row nowrap设置一定的宽度。x在这种情况下，更改flex-flowtocolumn 似乎不会重置该元素上定义的宽度x。该元素采用宽度，x就好像它是一样的flex-flow: row nowrap（自己尝试一下）。

由此产生了一大堆宽度继承问题，我们无法设置该flex-basis属性（我相信它的行为并不像这样），因此我们需要将所有内容包装在另一个.container可以定义宽度的元素中，然后放置实际的列.row而是在元素上设置样式。不过，.container也不会缩水。最好的情况是我们用.container(ing) 元素正确定义了列的宽度，以便两者都做自己的事情。

因此，我们需要一个伪元素::after来提供具有正确宽度的背景，包括一些margin和calc()模拟填充的技巧。

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

如果您想添加更多行，则必须将宽度从 2 (1/2) 的 50% 更改为 3 (1/3) 的 33% 等...它并不像编辑 HTML 本身那样可缩放。

总而言之，有一个仅适用于 2 行的演示，但目前这对于当前的 HTML 标记结构来说似乎不太合理。