Список элементов с flexbox - и иногда ссылка

Question

У меня есть несколько пунктов списка, которые содержат изображения и текст, выровненные рядом.Часть изображения всегда имеет одинаковую ширину (в пикселях), тогда как я хотел бы, чтобы поле рядом с ней заполняло оставшееся пространство.

В моем примере это работает нормально.Но если я хочу, чтобы элемент списка стал ссылкой

.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;
}

<ul class="advanced-list">
  <li>
    <div class="list-content">
      <h4 class="list-header">List item without link</h4> Lorem ipsum dolor...
    </div>
    <div class="list-img" style="background-image: url('https://placehold.it/550x300?text=Img:+550+x+300')"></div>
  </li>
  <li>
    <a href="#" class="advanced-link">
      <div class="list-content">
        <h4 class="list-header">List item with link inside</h4> Short text - keep width 100%.
      </div>
      <div class="list-img" style="background-image: url('https://placehold.it/550x300?text=Img:+550+x+300')"></div>
    </a>
  </li>
</ul>

при добавлении ссылки вокруг него что-то идет не так:

См. Эту скрипку - второй элемент списка имеетссылка - как применить здесь flexbox, чтобы текст занимал оставшуюся ширину?

Answer 1

Ваш элемент привязки .advanced-link находится в гибком контейнере.Так что он не будет иметь полную ширину.

Набор:

.advanced-list li .advanced-link {
    width: 100%;
}

или

.advanced-list li .advanced-link {
  flex: 1
}