Css 如何将flex容器设置为其flex项的宽度？

我有一个flex容器，其中包含

justify content:flex start

。由于flex项目占用的空间小于容器的大小，因此右侧会出现溢出

---

除了在flex容器上设置一个显式的宽度外，是否有一种方法可以使用相当于

width:auto

的方法来消除溢出？

不确定您的问题，但是：

演示：

您只需要使用

flex-grow:1启用flex项的灵活性以填充空间

<div class="o">
    <div>a</div><div>a</div><div>a</div><div>a</div><div>a</div>
</div>

<div class="o flex">
    <div>a</div><div>a</div><div>a</div><div>a</div><div>a</div>
</div>

div.o
{
    border:2px red solid;
    padding:2px;
    width:500px;
    flex-direction:row;
    display:flex;
    justify-content:flex-start;
}

div.o > div
    {border:2px red solid;margin:2px;}

div.o.flex > div
    {flex:1 1 auto;} /* enable flexibility on the flex-items */


AAAA
AAAA
主管
{
边框：2个红色实心；
填充：2px；
宽度：500px；
弯曲方向：行；
显示器：flex；
调整内容：灵活启动；
}
分区o>分区
{边框：2px红色实体；边距：2px；}
div.o.flex>div
{flex:11 auto；}/*在flex项上启用灵活性*/
如果您的意思是希望容器是项目的宽度，而不是项目扩展到容器宽度

您可以通过将
display:flex
更改为
display:inline flex
来实现这一点，正如Mahks建议的那样，您可以。但是如果内联放置不适合您的布局，另一种方法是浮动flex容器（而不是flex项）

将收缩包装以适合其内容，这与块级flex容器没有区别。内联级别的flex容器在其父内联格式上下文中布局时的行为类似于，这意味着默认情况下它也将收缩以适应其内容

width:min content
（CSS3“内在”而非“外在”）

display:inline flex
如果您不在乎它是否是内联的

如果在段落上使用
width:min content
，则最长的单词决定宽度


.flex容器{
显示器：flex；
}
.flex内联容器{
显示：内联flex；
}
.宽度最小内容{
宽度：最小含量；
}
.行方向{
弯曲方向：行；
边框：0.0625rem实心#3cf；
}
.col方向{
弯曲方向：立柱；
边框：0.0625rem固体品红；
}
flex


弯曲宽度：最小内容


内联弹性体
这一个在同一个内联flex（或flex）元素上对我有效：

Flex Box非常棘手…在它们真正可靠之前，它们还有很多工作要做。但是这个链接可以帮助你：嗯……你可以吗？你说的是“溢出”和“更少的空间”，但你可能指的是“下溢”和“更少的空间”或者“溢出”和“更多的空间”。澄清你的问题有什么答案吗？？？我制作了一把小提琴来演示我面临的一个类似问题：在过去，我看到这是通过
flex-basis:auto
实现的，但我们似乎处于过渡状态，Blink正准备添加
flex-basis:content
，这将完全满足您的要求。这将调整项目大小以适应容器，而不是相反。如果您支持较旧的Firefox浏览器，使用浮动将导致坏事情（tm）发生（请参阅：）
inline flex
在我的情况下没有帮助，实际上，应该这样做吗？这不是不可能吗？与为容器设置
inline block
和为内部块项目设置
width:100%
时一样，容器不会调整为其
max width
，而容器和项目将保持尽可能小的宽度。flexbox的工作原理不是很相似吗？
display:inline flex
在我的案例中解决了一个类似的问题，在我的案例中效果非常好。只是需要额外的min width=“100%”宽度没有这样的属性。@KonradGałęzowski请查看此caniuse页面：
   width: fit-content;