title: Setting a max-width for flex items?
body: <p>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.</p>
  <p>I want my 3 flex items to have a <code>max-width</code> and be floated left, leaving my non flex item floated right, in the overall container that is set to a max width of <code>1080px</code> sort of like this:</p>
  <pre><code>Option 1    Option 2    Option 3                                    Non-flex Item
  </code></pre>
  <p>I've tried setting the flex-align values and following <a href="https://stackoverflow.com/questions/44778298/make-flex-items-have-equal-width-in-a-row">this answer</a>, but that doesn't seem to work for this.</p>
  <p>As of right now, this is the code that I am working with:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;ul class=&quot;container&quot;&gt;
     &lt;li class=&quot;child&quot;&gt;One&lt;/li&gt;
     &lt;li class=&quot;child&quot;&gt;Three&lt;/li&gt;
     &lt;li class=&quot;child&quot;&gt;Three&lt;/li&gt;
     &lt;div class=&quot;non-flex&quot;&gt;
         I'm not a flex item
     &lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.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;
  }
  </code></pre>
  <p>I also made a <a href="https://jsfiddle.net/zfv323kq/1/" rel="nofollow noreferrer">Fiddle</a> for you all to play around.</p>