Как выровнять flex блоки по ширине всего блока?

Question

[Александр Иванов]

https://codepen.io/anon/pen/MmBVem

В примере сверху то что хочу сделать на flex.
т.к. данный элемент является хлебными крошками то количество элементов всегда будет разным, и процентный или float варианты - не варианты

.breadcrumbs{
    padding: 10px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
}
.breadcrumbs__elem{
    background-color: @color2;
    display: inline-flex;
    //float:left;
    padding: 11px 8px;
    a{
        pointer-events: none;
        color: @color4;
    }
}

<ul class="breadcrumbs">
    <li class="breadcrumbs__elem"><a class="breadcrumbs__elem__link first" href="#">1</a></li>
    <li class="breadcrumbs__elem"><a class="breadcrumbs__elem__link" href="#">2</a></li>
    <li class="breadcrumbs__elem"><a class="breadcrumbs__elem__link" href="#">3</a></li>
    <li class="breadcrumbs__elem"><span class="breadcrumbs__elem__link first">4</span></li>
  </ul>

Answer 1

[alex]

flex-grow: 1;