title: List items with flexbox - and sometimes a link
body: <p>I have some list items which contains an image and text aligned side by side. The image part always stays the same width (in px) whereas I would like the box next to it to fill out the rest of the space.</p>
  
  <p>In my example, it works fine. But if I want the list item to become a link</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.advanced-list {
    padding-left: 0;
    list-style: none;
  }
  
  .advanced-list li {
    display: flex;
    min-height: 80px;
    zoom: 1;
    flex-direction: row;
    background-color: #f5f5f5; 
  }
  
  .advanced-list li .list-img {
    display: block;
    height: 235px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    flex: 0 0 235px;
    order: 1;
  }
  
  .advanced-list li .list-content {
    padding: 15px;
    line-height: 1.3333333;
    order: 2;
  }
  
  .advanced-list li .list-content .list-header {
    margin-top: 0;
    margin-bottom: 5px;
  }
  
  .advanced-list li .advanced-link {
    display: flex;
    color: #252525;
    text-decoration: none;
    flex-direction: row;
  }
  
  .advanced-list li+li {
    margin-top: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="advanced-list"&gt;
    &lt;li&gt;
      &lt;div class="list-content"&gt;
        &lt;h4 class="list-header"&gt;List item without link&lt;/h4&gt; Lorem ipsum dolor...
      &lt;/div&gt;
      &lt;div class="list-img" style="background-image: url('https://placehold.it/550x300?text=Img:+550+x+300')"&gt;&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#" class="advanced-link"&gt;
        &lt;div class="list-content"&gt;
          &lt;h4 class="list-header"&gt;List item with link inside&lt;/h4&gt; Short text - keep width 100%.
        &lt;/div&gt;
        &lt;div class="list-img" style="background-image: url('https://placehold.it/550x300?text=Img:+550+x+300')"&gt;&lt;/div&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>by adding a link around it, something goes wrong:</p>
  
  <p><a href="https://jsfiddle.net/fbsh19pm/2/" rel="nofollow noreferrer">See this fiddle</a> - the second list item has a link - how should the flexbox be applied here so that the text takes up the remaining width?</p>