title: Make one flex item fixed width and its siblings all equal size
body: <p>I have four list items and I want three of them to stay the same size and the other one to be at with of 300px.</p>
  
  <p><strong>My HTML:</strong></p>
  
  <pre><code>   &lt;ul class="test"&gt;
        &lt;li class="desc"&gt;Test description&lt;/li&gt;
        &lt;li class="test"&gt;Test&lt;/li&gt;
        &lt;li class="test"&gt;Test&lt;/li&gt;
        &lt;li class="test"&gt;Test&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p><strong>My SASS:</strong></p>
  
  <pre><code>      ul.test {
          flex: 1 0 auto;
          flex-direction: row;
          display: flex;
        }
  
        li.desc{
          width: 300px;
        }
  
        li.test{
          background: green;
          flex: 1 0 auto
        }
  </code></pre>
  
  <p>I want the first li to be 300px in width and then the other three to be the same size.</p>