Setting a max-width for flex items? [duplicate]

_x000D_ _x000D_ _x000D_ This question already has an answer here:_x000D_ _x000D_ _x000D_ In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?_x000D_ _x000D_ 5 answers_x000D_ _x000D_ _x000D_ _x000D_ _x000D_ I'm trying to create a filter section on my site, the content is all generated dynamically (so I can't add extra parents to it), and our styleguide creates them using flex items. I'd like to keep this functionality for the most part. I want my 3 flex items to have a max-width and be floated left, leaving my non flex item floated right, in the overall container that is set to a max width of 1080px sort of like this: Option 1 Option 2 Option 3 Non-flex Item I've tried setting the flex-align values and following this answer, but that doesn't seem to work for this. As of right now, this is the code that I am working with: HTML

• One
• Three
• Three
I'm not a flex item

CSS .container{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; max-width: 1080px; margin: 0 auto; padding: 0 20px; box-sizing: content-box; } .child{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; } I also made a Fiddle for you all to play around.