3

I have a request to set the width of buttons to the longest sibling in a row of buttons.

Rules:

  1. Buttons sit in columns of a row
  2. Button content dictate the width of button.
  3. The longest button should set other sibling button's width

I've tried using flex: 1 with max/min-width however this will break rule 2. And I can easily do this in js I'm wondering if possible in css alone?

https://codepen.io/matthewharwood/pen/JvoVzE?editors=1100 

.link {
  height: 49px;
  padding: 0 24px;
  margin-right: 20px;
  background: pink;

  a {

    display: flex;
    align-items: center;
    line-height: 49px;
    justify-content: center;
  }
}


.container {
  width: 70%;
  margin: 0 auto;
  background: papayawhip;
  padding: 30px;
  display: flex;
}

.container2 {
  width: 70%;
  margin: 0 auto;
  background: orange;
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
}

.container3 {
  width: 70%;
  margin: 0 auto;
  background: honeydew;
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
}
<div class="container">
  <div class="link">
    <a href=""><span> 1 button</span></a>    
  </div>
  <div class="link">
    <a href=""><span> secondary button</span></a>    
  </div>
</div>

<div class="container2">
  <div class="link">
    <a href=""><span> 1 button</span></a>    
  </div>
  <div class="link">
    <a href=""><span> secondary button</span></a>    
  </div>
  <div class="link">
    <a href=""><span> third button</span></a>    
  </div>
</div>


<div class="container3">
  <div class="link">
    <a href=""><span> 1 button</span></a>    
  </div>
  <div class="link">
    <a href=""><span> 2 button</span></a>    
  </div>
</div>
Armeen Moon
  • 18,061
  • 35
  • 120
  • 233
  • 1
    i don't think you can have both 2 and 3 ... as it's a kind of loop : we need to loop all of them to see which on is bigger, get his width and applied to all of them --> it's more programming then styling BUT I still believe in CSS magic :) – Temani Afif Apr 19 '18 at 23:46
  • [I think this is what you want](https://stackoverflow.com/a/48007372/7700187) – James T Apr 19 '18 at 23:58

1 Answers1

1

Important Notice: the solution below is a hack.

The idea here is to rely on direction column and inline-flex to have all element equal width (the longest one) then I use transformation in order to revert back the row direction.

I know it's a bad hack

.link {
  height: 49px;
  padding: 0 24px;
  background: pink;
  border:1px solid;
}
 

.container {
  padding: 30px;
  display: inline-flex;
  flex-wrap:wrap;
  flex-direction:column;
}
.link:nth-child(2) {
  transform:translate(100%,-100%);
}
.link:nth-child(3) {
  transform:translate(200%,-200%);
}
.link:nth-child(4) {
  transform:translate(300%,-200%);
}
<div class="container">
  <div class="link">
    <a href=""><span> 1 button</span></a>    
  </div>
  <div class="link">
    <a href=""><span> secondary button</span></a>    
  </div>
</div>
<br>
<div class="container">
  <div class="link">
    <a href=""><span> 1 button</span></a>    
  </div>
  <div class="link">
    <a href=""><span> secondary button</span></a>    
  </div>
  <div class="link">
    <a href=""><span> third button</span></a>    
  </div>
</div>
<br>
<div class="container">
  <div class="link">
    <a href=""><span> 1 button</span></a>    
  </div>
  <div class="link">
    <a href=""><span> 2 button</span></a>    
  </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415