请教一下 Flex 布局如何让盒子尺寸自动适应超出屏幕宽度的子元素？

Question

示例在这里：https://codepen.io/mashirozx/...

网页用的是 column wrap 布局，想要不断加载新的内容，并以子元素的形式 append 到盒子里面，超出屏幕宽度的部分可以滚动查看(overflow-x)，因此需要盒子的宽度能够根据子元素宽度自动调整，类似传统布局时的 width: auto。

这是现在的情况：

我希望盒子的宽度等于所有子元素宽度之和（注意下方滚动条位置）：

请问应该怎样调整呢？

Answer 1

给flex盒子加上overflow: auto;

Answer 2

如果需要在尾端（最右边）保持10px的外边距，可以在楼上的答案再加上:

.flex-container-content > div:last-child {
  border-right: 10px solid #333;
}

在这儿父级容器宽度的计算极度复杂，结论是根据视觉格式化模型，右外边距会被忽视。有兴趣可以看看标准的解释：https://www.w3.org/TR/CSS22/visudet.html#blockwidth

Answer 3

楼上两位都说完了，就是这么回事