Getting flex to have equal width columns to the widest element - html

Question

I have a bunch of buttons and I want them to all be the same width without having to set a specific width, so naturally you would want the width of all buttons to take the width of the widest element, but I am having a hard time achieving this with flex as it seems it just wants them all to be 100%; I also tried it with a wrapper around the anchors but that didn't help as then the buttons were all varying widths.
CodePen: https://codepen.io/gutterboy/pen/MZWroj?editors=1100
So in that example, all the buttons should match the natural width of what the "Groundskeeping" would be.
HTML:
<div class="container">
<div class="row">
<div class="offset-md-4 col-md-4">
<div class="buttons">
Plumbing
Electrical
Groundskeeping
Construction
Cleaning
Security
Trades Assistant
General Duties
</div>
</div>
</div>
</div>
CSS:
.buttons {
display: flex;
flex-direction: column;
padding: 15px;
background-color: gray;
.btn {
display: block;
margin-bottom: 11px;
&:last-child {
padding-bottom: 21px;
}
}
}
a.btn {
display: inline-block;
text-align: center;
height: 35px;
padding: 0 20px;
min-width: 128px;
font-weight: bold;
color: #fff;
background-color: orange;
border: 2px solid #000;
white-space: nowrap;
text-decoration: none;
}
Is there any way this can be done in Flex or anything else?

Answer 1

You are almost good, you should use inline-flex instead of flex to have the shrink-to-fit behavior thus the biggest button will define the width of the container and all the elements are by default stretched to that width:
.container {
margin-top: 15px;
text-align:center;
}
.buttons {
display: inline-flex;
flex-direction: column;
padding: 15px;
background-color: gray;
}
.buttons .btn {
display: block;
margin-bottom: 11px;
}
.buttons .btn:last-child {
padding-bottom: 21px;
}
a.btn {
display: inline-block;
text-align: center;
height: 35px;
padding: 0 20px;
min-width: 128px;
font-weight: bold;
color: #fff;
background-color: orange;
border: 2px solid #000;
white-space: nowrap;
text-decoration: none;
}
<div class="container">
<div class="buttons">
Plumbing
Electrical
Groundskeeping
Construction
Cleaning
Security
Trades Assistant
General Duties
</div>
</div>