如何让换行Flexbox容器宽度不超出内部元素总宽度？

我想实现一组盒子在容器中填满一行后自动换行，且容器宽度在有剩余空间时，不会占满最大宽度，而是贴合内部元素的总宽度。

当前给容器设置的样式：

border: 1px solid black;
display: flex;
flex-wrap: wrap;
max-width: calc(100vw - 500px);

基础换行效果实现了，但有个问题：假设内部每个盒子宽度300px，当前容器最大宽度是800px，每行能放2个盒子（总宽度600px），但容器会占满800px，剩下200px留白。我试过调整width为fit-content、max-content、100%等，都没达到预期效果。

请问能不能实现换行的Flexbox容器宽度不超出内部元素总宽度（存在剩余空间时）？

可以实现，给容器同时设置width: fit-content并保留原有的max-width即可，调整后的样式如下：

border: 1px solid black;
display: flex;
flex-wrap: wrap;
width: fit-content;
max-width: calc(100vw - 500px);

原理 #

• width: fit-content会让容器宽度自动贴合内部元素的总宽度（比如每行2个300px的盒子时，容器宽度就变成600px）；
• max-width: calc(100vw - 500px)用来限制容器的最大宽度，当内部元素总宽度超过这个值时，自动触发换行，容器宽度也不会超出设定的最大值。

如果担心fit-content的兼容性，也可以用inline-flex替代flex，配合max-width：

border: 1px solid black;
display: inline-flex;
flex-wrap: wrap;
max-width: calc(100vw - 500px);

不过inline-flex会让容器变成行内块级元素，要是需要让容器居中，得给它的父元素加text-align: center。

内容的提问来源于stack exchange，提问作者machineghost