在flex中添加div直到溢出

Question

我希望我的容器看起来像这样： 如果每个 div 会导致溢出，它会转到下一行。

但目前看起来是这样的：

我的代码：

<div class="marker-cm">
    <div class="marker"> Fit-content width here </div>
    <div class="marker"> More fit-content width here </div>
    <div class="marker"> Text </div>
    <div class="marker"> Something here </div>
</div>

.marker-cm{
    display: flex;
    overflow: hidden;
} 
.marker{
    height: 23px;
    border-radius: 3px;
    padding: 0px 7px;
    margin-right: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

我怎样才能做到这一点？

Answer 1

在标准 CSS 中，flex-wrap 属性默认为 nowrap (ref)。

覆盖默认值。

将 flex-wrap: wrap 添加到弹性容器。

（您可能还需要将 flex-shrink: 0 添加到弹性项目，以禁用默认收缩功能。）