Make the longest content item set the width for the entire column

Question

As you can see in the snippet I've applied to this question, the alignment is ruined because the different divs have different width based on the text inside of them.

I want the biggest div's width of each column to be determined by the length of the text inside of it and have all the rest of the divs to take that width. I don't want to hardcode any width and I can't alter the HTML structure too much.

I want the end result to be something like this:

Is there anything that can be done

.match {
    display: flex;
}
.justify-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.matches-container div {
    margin-right: 20px;
    padding: 10px;
}
.match:nth-child(odd) {
  background-color: #d0d0d0;
}
.match:nth-child(even) {
  background-color: #e4b2b2;
}

<div class='matches-container'>
    <div class='match'>
        <div class='justify-center'>
            <p>George</p>
        </div>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
    </div>
    <div class='match'>
        <div class='justify-center'>
            <p>Mia</p>
        </div>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
    </div>
    <div class='match'>
        <div class='justify-center'>
            <p>Ivan</p>
        </div>
        <div class='justify-center'>
            <p>Level 9999</p>
        </div>
        <div class='justify-center'>
            <p>Wizard</p>
        </div>
    </div>
</div>

Maybe no what your looking for, but a table achieves that by standard. — Grumpy, Sep 09 '19 at 17:39

Michael Benjamin · Accepted Answer · 2019-09-09T23:11:26.527

The primary container (.matches-container) has three flex items (.match).

Those items can be set to track each others' width because they are siblings. There is a direct association between them, as they share the same parent.

However, the divs you want to target (.justify-center) are descendants of the items (.match), making them cousins, meaning they have no direct association and there are no natural CSS solutions for relative sizing.

Hence, unless you want to make all your content items siblings, or use tables or JavaScript, you can't get your content items in one row to set the width of content items in other rows.

More information:

score 0 · Answer 2 · answered Sep 09 '19 at 17:40

Change the css to the following. Anyhow the width won't go more than 33% even if you put width: 50% but specifying the width will solve your problem. I also removed the justify-content: center to make sure it will align left.

.justify-center {
    display: flex;
    align-items: center;
    width: 33%;
    text-align: left;
}

Keith · Answer 3 · 2019-09-09T18:03:17.400

You can try by changing around your CSS:

.matches-container {
    display: flex;
}
.justify-center {
    align-items: center;
    padding: 10px;
}
.match div:nth-child(odd) {
  background-color: #d0d0d0;
}
.match div:nth-child(even) {
  background-color: #e4b2b2;
}
.match{
  justify-content: flex-start;
}

<div class='matches-container'>
    <div class='match'>
        <div class='justify-center'>
            <p>George</p>
        </div>
        <div class='justify-center'>
            <p>Mia</p>
        </div>
        <div class='justify-center'>
            <p>Ivan</p>
        </div>
    </div>  
     <div class='match'>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Level 9999</p>
        </div>
    </div>
    <div class='match'>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
        <div class='justify-center'>
            <p>Wizard</p>
        </div>
    </div>
</div>

https://jsfiddle.net/kzec0798/

Might be worth pointing out that you re-arranged where/how the data is output. Which is a big reason why your solution works. Also, `start` is not a proper value for `flex-direction`. I'm assuming it was supposed to be `column`. Since it's invalid and not doing anything, you can omit `flex-direction` from your solution. — hungerstar, Sep 09 '19 at 18:02

score 0 · Answer 4 · answered Sep 09 '19 at 17:49

If you really want a descendant element defining column widths and want the same markup, then you'll have to switch your display property to table values, forging flexbox.

If what you're displaying is tabular data, and it does appear that way, then it is okay to use a <table>.

.matches-container {
   display: table;
}
.match {
    display: table-row;
}
.match > div {
   display: table-cell;
}
.justify-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.matches-container div {
    margin-right: 20px;
    padding: 10px;
}
.match:nth-child(odd) {
  background-color: #d0d0d0;
}
.match:nth-child(even) {
  background-color: #e4b2b2;
}

<div class='matches-container'>
    <div class='match'>
        <div class='justify-center'>
            <p>George</p>
        </div>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
    </div>
    <div class='match'>
        <div class='justify-center'>
            <p>Mia Mia Mia Mia Mia Mia Mia</p>
        </div>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
    </div>
    <div class='match'>
        <div class='justify-center'>
            <p>Ivan</p>
        </div>
        <div class='justify-center'>
            <p>Level 9999</p>
        </div>
        <div class='justify-center'>
            <p>Wizard</p>
        </div>
    </div>
</div>

score 0 · Answer 5 · answered Sep 09 '19 at 17:55

Displaying the data in a table would be the simplest solution

td {
padding: 1rem
}

<table>
 <tr>
  <td>George</td>
  <td>Level 10</td>
  <td>Ranger</td>
 </tr>

 <tr>
  <td>Mia</td>
  <td>Level 10</td>
  <td>Ranger</td>
 </tr>

 <tr>
  <td>Ivan</td>
  <td>Level 9999</td>
  <td>Wizard</td>
 </tr>
</table>

Make the longest content item set the width for the entire column

5 Answers5

Linked