Tengo 3 botones seguidos que varían en ancho. Quiero que todos ganen el mismo ancho para llenar el ancho restante de la fila, por lo que el más ancho seguirá siendo más ancho que los demás, etc.

Puede ver a continuación que lo que he intentado hacer con flex ha dado como resultado que todos los botones tengan el mismo ancho. Lo séflex-grow se puede usar para hacer crecer proporcionalmente cada elemento, pero no puedo entender cómo hacer que todos crezcan en relación con su tamaño original.

Puede ver en la segunda fila que el elemento azul es más grande que los otros dos. Solo quiero que los tres se expandan de su tamaño actual por igual para llenar la fila.

Gracias

.row-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.button {
  flex: 1;
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

.button--1 {
  background: red
}

.button--2 {
  background: green;
}

.button--3 {
  background: blue;
}

<div class="row-flex">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large title</a>
</div>

<br/>

<div class="row">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large title</a>
</div>