Is there any way to tell flexbox items to fill the remaining space but wrap as soon as they are getting smaller than their content.
Some of the items have a fixed percentage width though.
HTML
<div> <div>column auto</div> <div>column 33.333%</div> <div>column 33.333%</div> <div>column auto</div> </div> CSS
.grid { display: flex; flex-direction: row; flex-wrap: wrap; background: gray; } .grid__item { background: red; flex: 1; } .one-third { flex-basis: 33.333%; background: green; } I want the fixed width items (green) to always have a width of 33.333%. The other items (red) should fill the remaining space. If the screen is getting smaller I want the items to wrap if there is not enough space to show their content.
I thought I could simply use flex: 1 and flex-wrap: wrap on the container to do something like this, but as you might see in the pen it doesn't wrap at all. If I remove flex: 1 in .grid__item they kind of wrap, but not all the way down to very small screen sizes.
2 Answers
You can certainly allow for wrapping but I'm not entirely sure the effect is what you are after. If you have an image of how you expect this to look after the wrap we can enhance from there.
* { box-sizing: border-box; } .grid { display: flex; flex-direction: row; flex-wrap: wrap; background: gray; } .grid__item { background: red; flex: 1 0 auto; padding: 1em; } .one-third { flex: 0 0 33.333%; background: green; border: 1px solid lightgreen; }<div> <div>Lorem ipsum dolor sit amet</div> <div>column 33.333%</div> <div>column 33.333%</div> <div>Lorem ipsum dolor sit amet,</div> </div>setting flex:1 it will shrink indefinitely because it means flex-grow:1 ;flex-shrink:1
try setting flex: 1 0 auto;
