Intentando un navegador flexbox que tiene hasta 5 elementos y tan poco como 3, pero no divide el ancho por igual entre todos los elementos.

Violín

El tutorial que estoy modelando después es http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

HABLAR CON DESCARO A

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
  flex-grow: 1;
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
  padding: 20px 20px 20px 70px;
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
}
.tabs ul li.active {
  background: white;
  color: blue;
}
.tabs ul li:before {
  content: "";
}

<div class="tabs">
  <ul>
    <li class="active" data-tab="1">Pizza</li>
    <li data-tab="2">Chicken Noodle Soup</li>
    <li data-tab="3">Peanut Butter</li>
    <li data-tab="4">Fish</li>
  </ul>
</div>

Hay una parte importante que no se menciona en el artículo al que se vinculó y que es flex-basis. Por defecto flex-basises auto.

De la especificación :

Si la base flexible especificada es automática, la base flexible utilizada es el valor de la propiedad de tamaño principal del elemento flexible. (Esta puede ser la palabra clave auto, que dimensiona el elemento flexible en función de su contenido).

Cada elemento flexible tiene un flex-basistipo similar a su tamaño inicial. Luego, a partir de ahí, cualquier espacio libre restante se distribuye proporcionalmente (según flex-grow) entre los elementos. Con auto, esa base es el tamaño del contenido (o el tamaño definido con width, etc.). Como resultado, a los elementos con texto más grande se les da más espacio en general en su ejemplo.

Si desea que sus elementos sean completamente uniformes, puede configurarlos flex-basis: 0. Esto establecerá la base flexible en 0 y luego cualquier espacio restante (que será todo el espacio ya que todas las bases son 0) se distribuirá proporcionalmente en función de flex-grow.

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

Este diagrama de la especificación hace un buen trabajo al ilustrar el punto.

Y aquí hay un ejemplo de trabajo con su violín.

Para crear elementos con el mismo ancho de uso Flex, debe establecer el elemento secundario de su hijo (elementos flexibles):

flex-basis: 25%;
flex-grow: 0;

Dará a todos los elementos de la fila 25% de ancho. No crecerán e irán uno por uno.