Setting a max-width for flex items?

Question

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

<ul class="container">   <li class="child">One</li>   <li class="child">Three</li>   <li class="child">Three</li>   <div class="non-flex">    I'm not a flex item   </div> </ul> 

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.

Answer 1

I would apply a width or min-width to the .child items (or left/right padding that creates the distance between them) and margin-left: auto to the last item, which moves it right, independently from the others:

https://jsfiddle.net/6vwny6bz/2/

.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 {    list-style: none;    min-width: 80px;    padding: 10px 0;  }    .non-flex {    margin-left: auto;    padding: 10px 0;  }

<ul class="container">    <li class="child">One</li>    <li class="child">Three</li>    <li class="child">Three</li>    <div class="non-flex">      I'm not a flex item    </div>  </ul>