я есть 3 кнопки подряд, которые все различаются по ширине. Я хочу, чтобы все они получили одинаковую ширину, чтобы заполнить оставшуюся ширину строки, поэтому самая широкая будет все еще шире, чем другие и т. Д.

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

Вы можете видеть во втором ряду, что синий предмет больше, чем два других. Я просто хочу, чтобы все три расширились от их текущего размера, чтобы заполнить строку.

Спасибо

.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>