How do I make flex items shrink to their smallest fitting size, but the same size?

Question

I'm trying to make a row of buttons, where the buttons will be the same size, but as small as possible - so each being the same size as the largest button.

How can I do this?

 div { border: solid 1px black; margin: 5px; padding: 5px; background-color: #fff; } .container { display: flex; flex-flow: row nowrap; justify-content: flex-end; } .item { background-color: #eef; flex: 0 1 auto; white-space: nowrap; } 

 <div class="container"> <div class="item">this one is quite long</div> <div class="item">short</div> </div> 

Answer 1

flexbox can do a lot but not all. For this grid would be good, but since it lacks good browser support, its older "version" table might be an option.

Here is a script free, dynamic solution, using display: inline-table .

 .container, .item { border: solid 1px black; margin: 5px; padding: 5px 0 5px 5px; background-color: #fff; } .container { text-align: right; } .wrap { display: inline-table; border-spacing: 10px 5px; } .item { background-color: #eef; display: table-cell; width: 50%; white-space: nowrap; text-align: left; } 

 <div class="container"> <div class="wrap"> <div class="item">this one is quite long</div> <div class="item">shorter</div> </div> </div> 

Answer 2

I don't think this is possible with flexbox, but for what it's worth, this can be achieved with the CSS Grid Layout Module .

 .container, .item { border: solid 1px black; margin: 5px; padding: 5px 0 5px 5px; background-color: #fff; } .container { text-align: right; } .wrap { display: inline-grid; grid-template-columns: 1fr 1fr; } .item { background-color: #eef; text-align: left; } 

 <div class="container"> <div class="wrap"> <div class="item">this one is quite long</div> <div class="item">shorter</div> </div> </div> 

Codepen demo

Here's the relevant CSS:

.container {
  text-align: right; 
}
.wrap {
  display: inline-grid; 
  grid-template-columns: 1fr 1fr;
}

It's worth noting here that flex-grow: 1 (for flex items) works a bit different here than flexible lengths - 1fr for css grids.

 .container, .item { border: solid 1px black; margin: 5px; padding: 5px 0 5px 5px; background-color: #fff; } .container { text-align: right; } .wrap { display: inline-flex; } .item { background-color: #eef; text-align: left; flex: 1; } 

 <div class="container"> <div class="wrap"> <div class="item">this one is quite long</div> <div class="item">shorter</div> </div> </div> 

It's almost identical code - except that flex-grow seems to wrap the first item's long text on to a new line.