1

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

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

这是现在的情况:

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

请问应该怎样调整呢?

1月31日提问
3 个回答
3

给flex盒子加上overflow: auto;

0

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

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

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

0

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

撰写答案

推广链接