Getting flex to have equal width columns to the widest element

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">
    <a href="" class="btn alt">Plumbing</a>
    <a href="" class="btn alt">Electrical</a>
    <a href="" class="btn alt">Groundskeeping</a>
    <a href="" class="btn alt">Construction</a>
    <a href="" class="btn alt">Cleaning</a>
    <a href="" class="btn alt">Security</a>
    <a href="" class="btn alt">Trades Assistant</a>
    <a href="" class="btn alt">General Duties</a>
</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?

Does this answer your question? [Every item to have the same width as the widest element](https://stackoverflow.com/questions/31159732/every-item-to-have-the-same-width-as-the-widest-element) — leonheess, Aug 16 '21 at 18:57

score 4 · Accepted Answer · answered Dec 09 '18 at 21:23

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">
    <a href="" class="btn alt">Plumbing</a>
    <a href="" class="btn alt">Electrical</a>
    <a href="" class="btn alt">Groundskeeping</a>
    <a href="" class="btn alt">Construction</a>
    <a href="" class="btn alt">Cleaning</a>
    <a href="" class="btn alt">Security</a>
    <a href="" class="btn alt">Trades Assistant</a>
    <a href="" class="btn alt">General Duties</a>
  </div>

</div>

is there a way exclude a row from determining the width of the group? e.g. the first line has much more Text, which should be wrapped, but the width comes still from the largest of the others? — user3104267, Nov 21 '20 at 13:17
@user3104267 apply `width:0;min-width:100%` to the elements you want to exclude (related: https://stackoverflow.com/a/55041133/8620333) — Temani Afif, Nov 21 '20 at 13:25

Getting flex to have equal width columns to the widest element

1 Answers1