0

I'm pretty sure I managed to do this by accident while developing this page, but now I cannot for the life of me figure out what I did.

I am trying to create three <div>s as follows:

  • All divs same width
  • Width tto be as per widest <div>
  • Total width to be no more than needed (ie not full screen width)
  • The collection of <div>s to be centred in page

So far I have the following:

.switch-buttons-container {
 display: flex;
 flex-flow: wrap;
 justify-content: center;
 margin: auto;
}

.button-div {
 flex: 1 1 0;
 padding: 5px;
 color: grey;
 border: 1px solid black;
 background-color: rgba(0,0,0,0.25);
 border-radius: 0px 0px 10px 10px;
 line-height: 28px;
 font-size: 22px;
 margin-left: 2px;
 margin-right:2px;
 font-weight: bold;
 cursor: pointer;
}

.selected {
 color: white;
 background-color: rgba(0,0,0,0.5);
}

.indicator, .indicator-selected {
 display: inline-block;
 width: 20px;
 height: 20px;
 border-radius: 10px;
 border: 1px solid black;
 margin-right: 10px;
}

.indicator {
 background-color: grey;
}

.indicator-selected {
 background-color: yellow;
}

.button-text {
 display: inline-block;
}
<div class="switch-buttons-container" id="systems-selection-box"> 
 <div class="button-div selected" id="system1">
  <div class="indicator-selected"> </div>
  <div class="button-text">System 1</div>
 </div>
 <div class="button-div" id="system2">
  <div class="indicator"> </div>
  <div class="button-text">Sys 2</div>
 </div>
 <div class="button-div" id="system3">
  <div class="indicator"> </div>
  <div class="button-text">3</div>
 </div>
</div>

As you can see, this fills the full width of the screen rathen than making the buttons only as wide as they need to be.

Note that the text content of the buttons is not known at design time and there are other areas of the page which have different width requirements so this can't be limited in the body element.

My guess is that I need to fix something in the .switch-buttons-container class, but I've searched and searched and tried all kinds but just can't get this right.

Fat Monk
  • 2,077
  • 1
  • 26
  • 59
  • 2
    Flexbox can't equalise lengths/widths like that. – Paulie_D Apr 28 '20 at 12:10
  • How about `display: inline-flex`? https://jsfiddle.net/g1rzjeb8/ – Michael Benjamin Apr 28 '20 at 15:46
  • That's close, but its wrapping the the text to more than one line... I'd like to keep the indicator and text on one line. – Fat Monk Apr 28 '20 at 17:00
  • Is this [fiddle](https://jsfiddle.net/Dhruvil21_04/5duknwv7/3/) correct? I improved Micheal's version. – Dhruvil21_04 Apr 29 '20 at 19:50
  • @Dhruvil21_04 Not quite.. the div are all different sizes in that fiddle, shrunk to the minimum size that can contain the text. – Fat Monk Apr 30 '20 at 09:42
  • You mentioned "Width tto be as per widest
    " in question, but CSS can't calculate width dynamically based on content, for that you have to use JS. This is not solution, but you can give min-width if you know the content wont exceed that width.
     – Dhruvil21_04 Apr 30 '20 at 17:30
  • @Dhruvil21_04 I know I could fake it with JavaScript BUT `flex-box` actually does this.. or at least appears to. If I have a flex layout based on rows with the grow setting enabled then the height of the divs automatically expands 'to fill the available space' which results in the boxes being both the same width (as full of content) and height - with empty vertical space in the divs making teh divs the same height. @MichaelBenjamin's fiddle above shows this happening to the height without JavaScript. I guess I may need to use a column based layout but can't get my head around exactly how. – Fat Monk May 01 '20 at 09:47
  • I know that with more content, height of the div can increase. But, from your comment above, you already mentioned "'I'd like to keep the indicator and text on one line." Also, I just changed the content of div1 in @Micheal's fiddle and not all div widths are same. It may feel like it's working but only for small content. If you find the solution, then I would be happy to learn something new. Good luck! – Dhruvil21_04 May 01 '20 at 16:02
  • 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

0 Answers0