html - All widths set to width of widest element

Question

I've read a lot of tutorials about CSS flex boxes and CSS grids, but frankly I just can't figure out how to do this simple(?) thing.

All I want is for the elements in a container to all be as wide as the widest element.

I don't want them to fill up the whole width of the container, just all grow to the maximum width. Can that be done with CSS?

Consider this HTML:

<div class="container">
   <button>a normal button</button>
   <button>tiny</button>
   <button>a really, really, really wide button</button>
</div>

That produces something like this:

What I want is something like this, where they're all the width of that widest button:

I DON'T want them to just stretch out to fill the width of the page:

Can this be done? If so, what would be the CSS for the above HTML?

Answer 1

Yes. This can be done with pure CSS.

Here's a simple solution:

.container {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;
}

<div class="container">
   <button>a normal button</button>
   <button>tiny</button>
   <button>a really, really, really wide button</button>
</div>