Jak równomiernie rozpowszechniać elementy menu za pomocą CSS, gdy szerokość i ilość nie są znane?

Czytałem dużo o równomiernym rozprowadzaniu elementów za pomocą css, ale każde znalezione rozwiązanie wymaga znajomości i zdefiniowania szerokości i / lub liczby dystrybuowanych elementów.

Mam kontener o stałej szerokości - w tym miejscu może znajdować się dowolna liczba elementów li automatycznej szerokości, które muszą być równomiernie rozmieszczone w elemencie macierzystym od lewej do prawej.

Oto mój znacznik - poza tym może być dowolna liczba zakładek z dowolną długością tekstu.

<ul class="tabs">
     <li class="tab active" id="tab-1"><span class="tab-title">Tab 1</span></li>
     <li class="tab " id="tab-2"><span class="tab-title">Tab 2</span></li>
     <li class="tab " id="tab-3"><span class="tab-title">Tab 3</span></li>
     <li class="tab " id="tab-4"><span class="tab-title">Tab 4</span></li>
</ul>

Więc nawet dystrybucja z css, gdy liczba elementów i szerokość jest dynamiczna - czy można to zrobić?

Wydaje się, że tak oczywista rzecz do zrobienia - Cholera CSS!