Как прописать ширину пустого span, чтобы он занимал всё свободное пространство?

Question

Всем доброго времени суток! Никак не могу дойти до решения, как задать ширину span, который будет создавать отмеченную на скриншоте линию. Родителю (li) задала display: flex. Пробовала разные варианты width для всех трех элементов, но это не дало желаемого результата. Как сделать так, чтобы span занимал всё пустое место, между блюдом и ценой?

<ul class="menu_list">
   <li class="list-item">
  <p class="dish-name">Chicken Breast</p>
  <span class="dots"></span>
  <p class="dish-price">$19.50</p>
   </li>
   <li class="list-item">
  <p class="dish-name">Fresh Grilled Asparagus</p>
  <span class="dots"></span>
  <p class="dish-price">$25.00</p>
   </li>
   <li class="list-item">
  <p class="dish-name">Pork-Stuffed Skins</p>
  <span class="dots"></span>
  <p class="dish-price">$25.50</p>
   </li>
   <li class="list-item">
  <p class="dish-name">Grilled Chicken</p>
  <span class="dots"></span>
  <p class="dish-price">$25.49</p>
   </li>
   <li class="list-item">
  <p class="dish-name">Steak Frites</p>
  <span class="dots"></span>
  <p class="dish-price">$25.00</p>
   </li>
</ul>

Answer 1

flex: 1 (тоже что и flex-grow: 1) указывает на сколько элемент будет занимать места относительно свободного места в контейнере.

.list-item {
  display: flex;
  align-items: baseline;
}

.dots {
  border-bottom: dotted 2px #000;
  flex: 1;
}

<ul class="menu_list">
  <li class="list-item">
    <p class="dish-name">Chicken Breast</p>
    <span class="dots"></span>
    <p class="dish-price">$19.50</p>
  </li>
  <li class="list-item">
    <p class="dish-name">Fresh Grilled Asparagus</p>
    <span class="dots"></span>
    <p class="dish-price">$25.00</p>
  </li>
  <li class="list-item">
    <p class="dish-name">Pork-Stuffed Skins</p>
    <span class="dots"></span>
    <p class="dish-price">$25.50</p>
  </li>
  <li class="list-item">
    <p class="dish-name">Grilled Chicken</p>
    <span class="dots"></span>
    <p class="dish-price">$25.49</p>
  </li>
  <li class="list-item">
    <p class="dish-name">Steak Frites</p>
    <span class="dots"></span>
    <p class="dish-price">$25.00</p>
  </li>
</ul>

БЛОГ НА HUSL

Как прописать ширину пустого span, чтобы он занимал всё свободное пространство?

Ответы (1 шт):