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

Using flex property you can set proportions:

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

.row {
  display: flex;
}

.button--1 {
  background: red;
  flex: 1 1 auto;
}

.button--2 {
  background: green;
  flex: 2 1 auto;
}

.button--3 {
  background: blue;
  flex: 3 1 auto;
}

  Single
  Larger title
  Another really large title