如何强制css flex child成为其唯一的行？

Question

父级是一个弹性容器，它在一行中显示子级，并启用了包装。大多数组件在彼此相邻放置时都很好，而且一切正常。但其中一个组件是一个输入滑块，我更喜欢放在它自己的行上（100％容器宽度）。

我可以将滑块设置为100％宽度...但是边距和填充会使所有内容变得混乱并导致水平滚动条。当然我可以将溢出设置为隐藏...但后来我错过了内容。

那么如何告诉flex容器将这个孩子放在自己的行上？

• parent：display flex，row wrap
• child：flex 1 0 auto

Javascript是可能的，但我不想在这种情况下使用它。

Answer 1

尝试将全角子项设置为flex: 1 100%;。在这里，have a fiddle。

Here it is适用于小提琴的叉子。