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

You can see below that what I've tried to do with flex has resulted in all the buttons being the same width. I know flex-grow can be used to proportionally grow each item, but I can't work out how to get them all to grow in relation to their original size.

You can see in the second row that the blue item is larger than the other two. I just want all three to expand from their current size equally to fill the row.

Thanks

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

Answer 1

Short Answer

Switch from flex: 1 to flex: auto.

---

Explanation

The flex-grow property factors in two key pieces of data:

1. The free space in the row / column where it is being used.
2. The value of the flex-basis property.

---

Distribution of Free Space

The flex-grow property distributes free space in the container among flex items in the same line.

If there is no free space, flex-grow has no effect.

If there is negative free space (i.e., the total length of flex items is greater than the length of the container), then flex-grow has no effect and flex-shrink comes into play.

---

The flex-basis factor

When flex-basis is 0, flex-grow ignores the size of the content in flex items and treats all space on the line as free space.

This is absolute sizing. All space on the line is distributed.

When flex-basis is auto, the size of the content in flex items is first deducted to determine the free space in each item. flex-grow then distributes the free space among items (based on each item's flex-grow value).

This is relative sizing. Only extra space on the line is distributed.

Here's an illustration from the spec:

---

Examples:

• flex: 1 (absolute sizing)

This shorthand rule breaks down to: flex-grow: 1 / flex-shrink: 1 / flex-basis: 0

Applied to all flex items, this will make them equal length, regardless of content. (Note that in some cases an override of default minimum sizing will be necessary for this effect to occur.)

• flex-grow: 1 (relative sizing)

This rule by itself will factor in both content size and available space, because the default value for flex-basis is auto.

• flex: auto (relative sizing)

This shorthand factors in both content size and available space because it breaks down to:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: auto

More variations here: 7.1.1. Basic Values of flex

^{additional keywords for search: difference between flex-basis auto 0 flex 1 auto}

Answer 2

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;
}

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

Answer 3

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;
}

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

Answer 4

Minimalistic answer with (hopefully useful, explanatory) alternatives:

HTML:

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

CSS:

.row-flex {
  display: flex;
}

.button {
  flex-grow: 1; /* make the item grow proportionally to its original size */
                /* default value is 0, the item does not grow */
                /* a meaningful default for flexbox items positioning with */
                /* justify-content: <value>; */      
  padding: 10px;
  color: #fff;
  text-align: center;
}

.button--1 {
  background: red
}

.button--2 {
  background: green;
}

.button--3 {
  background: blue;
}

The following CSS declarations also work because all they do is override the default flex-grow: 0; to the (for the desired behavior required) flex-grow: 1;:

.button {
  flex: auto;
  ...
}

which is a shorthand for:

.button {
  flex: 1 1 auto;    
  ...
}

which is a shorthand for:

.button {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  ...
}