How to align flex blocks to the width of the entire block?

Question

css

https://codepen.io/anon/pen/MmBVem
In the example above, what I want to do on flex.
because given element is breadcrumbs, then the number of elements will always be different, and percentage or float options are not options

.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

flex-grow: 1;