0

Note there is a similar question here, however the pure css answer uses flex-direction: column for the container.

It seems the answer to the original question is that flexbox does not support this, however I'm also wondering whether it's possible with CSS Grid. Perhaps better asked in a new question...

I have a flexbox container with a few hundred items in them containing variable length text and white-space is set to nowrap to ensure that the text does not wrap. Here's an example:

<div style="display:flex; flex-direction: row;">
    <div>Short label</div>
    <div>Really really really looooooong label</div>
    <div>Really really really looooooong label that's even longer</div>
    ...
    <div>And so on for a few hundred of these divs</div>
</div>

Is there a set of flexbox parameters that will cause all the items to have a width that is equal to the width of the items with the longest content? In this case that would be the div:

    <div>Really really really looooooong label that's even longer</div>

What I could do is measure the length of the above div and set the minimum width to that length, but I'm wondering if flexbox has a way of doing this automatically? Currently, as @M0ns1f is pointing out in his answer, it seems the only way to do this is to set minimum-width either manually or via javascript.

Asons
  • 84,923
  • 12
  • 110
  • 165
Ole
  • 41,793
  • 59
  • 191
  • 359
  • 1
    Possible duplicate of [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) – yohohosilver Oct 14 '17 at 19:48
  • No, Flexbox doesn't have a property for equal width (or height) spanning multiple columns or rows. – Asons Oct 14 '17 at 20:28
  • 1
    No need for new question, just add the edit last in the question, where you say Flexbox can't without script and then ask if CSS Grid can do this. – Asons Oct 14 '17 at 20:41

1 Answers1

0

After @Matt Weber comment this is what you should do

var choices = document.querySelectorAll('div');
var maxWidth = 0;
// read
for (i = 0; i < choices.length; ++i) {
    maxWidth = Math.max(maxWidth, choices[i].offsetWidth)
};

// write
for (i = 0; i < choices.length; ++i) {
    choices[i].style.minWidth = maxWidth + "px";
};
.contain{
 width:100% !important;
 min-width:100%;
 display:flex;
 flex-direction: row;
}
div.contain div {
 white-space: nowrap;
 margin: 0 5px;
}
<div class="contain" >
    <div>Short label</div>
    <div>Really really really looooooong label</div>
    <div>Really really really looooooong  looooooong looooooong label that's even longer</div>
    <div>And so on for a few hundred of these divs</div>
</div>
M0ns1f
  • 2,705
  • 3
  • 15
  • 25
  • Interesting - but the solution has to use flexbox. Also the the text in the items should not wrap as the css whitespace css property is set to nowrap - the items within the flex container are allowed to wrap though but they should all have the same length, and they can be in the same row if they fit and all of them have the same minimum width. – Ole Oct 14 '17 at 19:55
  • @Ole see now i have added the `flex-direction: column;` – M0ns1f Oct 14 '17 at 20:03
  • `flex-direction` should be `row` such that the items can wrap in the container. I updated the question summarizing the additional specs. – Ole Oct 14 '17 at 20:07
  • @Ole see now, i think adding min-width is the only option – M0ns1f Oct 14 '17 at 20:15
  • I think you are right - the percentage usage is interesting - when I run the code though only `short label` shows up ... ? – Ole Oct 14 '17 at 20:27
  • no there is an overflow-x all the element are in one row and take the largest div width – M0ns1f Oct 14 '17 at 20:31
  • @Ole You need to add `flex-wrap: wrap` to the container or else they will line up horizontally – Asons Oct 14 '17 at 20:31