Make flex-grow expand items based on their original size

Question

I have 3 buttons in a row which all vary in width. I want them to all gain width the same to fill the remaining width of the row, so the widest will still be wider than the

Answer 1

Not sure if this is entirely what you are after, but if you just set flex-grow:1 instead of flex:1;, I think that is your required result:

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

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

.button--1 {
  background: red
}

.button--2 {
  background: green;
}

.button--3 {
  background: blue;
}

  Single
  Larger title
  Another really large title