How can I force a css flex child to be the only on its row?
css, html
Solution
Try setting the full-width child to `flex: 1 100%;`. Here, have a fiddle.
Here it is applied to a fork of your fiddle.
Problem
The parent is a flex container which displays the children in a row, with wrapping enabled. Most components are fine when positioned next to each other in a row, and that all works. But one of the components is an input slider which I prefer to place on its own row (100% container width). I can set the slider to 100% width... but the margin and padding mess everything up and cause horizontal scrollbars. Of course I could set overflow to hidden... but then I'm missing out on content. So how do I tell the flex container to put this child on its own row? - parent: display flex, row wrap - child: flex 1 0 auto Javascript is a possibility, but I would prefer not to use it in this case.