CSS: What are the behavior rules for a "width: auto" container with inline-flex?

Question

I was trying to create a list / table view with dynamic width using flexbox, and encountered a behavior I couldn't really wrap my head around. The result I'm trying to achieve is a width that fits the content of the list, at its' widest point.

 .main { width: auto; background: rgb(233, 148, 148); display: inline-flex; flex-wrap: wrap; } .container { display: flex; width: 100%; } .label, .value { flex: 1; padding: 4px; } .label { text-align: end; border-right: 2px solid red; } .value { text-align: start; }

 <div> <div class="main"> <div class="container"> <div class="label">Some Label</div> <div class="value">Some value</div> </div> <div class="container"> <div class="label">Some label 2</div> <div class="value">Other val</div> </div> <div class="container"> <div class="label">Third label</div> <div class="value"> <div>N/A</div> </div> </div> </div> </div>

What it boils down to, is that the width seems to be determined by the total characters count, and not the widest point, as I would expect. You can edit the HTML and remove the N/A, for example, and the width will decrease.

When I switch to display: inline-block with white-space: nowrap , the width is as expected, but the "columns" are not aligned.

 .main { width: auto; background: rgb(233, 148, 148); display: inline-block; white-space: nowrap; } .container { display: flex; width: 100%; } .label, .value { flex: 1; padding: 4px; } .label { text-align: end; border-right: 2px solid red; } .value { text-align: start; }

 <div> <div class="main"> <div class="container"> <div class="label">Some Label</div> <div class="value">Some value</div> </div> <div class="container"> <div class="label">Some label 2</div> <div class="value">Other val</div> </div> <div class="container"> <div class="label">Third label</div> <div class="value"> <div>N/A</div> </div> </div> </div> </div>

What causes the large width to occur when the display is inline-flex ? Is there a way to get the behavior I'm trying to achieve? I know it can probably be resolved with display: grid , but I'm looking for a simpler solution.

Answer 1

I know it can probably be resolved with display: grid, but I'm looking for a simpler solution.

It might be difficult if you do not handle the grid-layout fine enough yet, but it looks not that much complicated if you use the grid system ;)

For the width, look at max-content .

simple example:

 .main { width: max-content; background: rgb(233, 148, 148); } .container { display: grid; grid-template-columns: repeat(2, 1fr); } .label, .value { padding: 4px; } .label { text-align: end; border-right: 2px solid red; } .value { text-align: start; }

 <div> <div class="main"> <div class="container"> <div class="label">Some Label</div> <div class="value">Some value</div> </div> <div class="container"> <div class="label">Some label 2</div> <div class="value">Other val</div> </div> <div class="container"> <div class="label">Third label</div> <div class="value"> <div>N/A</div> </div> </div> </div> </div>

---

In the past ,before flex & grid , display would use the table-layout.

 .main { display:table; background: rgb(233, 148, 148); } .container { display: table-row; } .label, .value { padding: 4px; display:table-cell; } .label { text-align: end; border-right: 2px solid red; } .value { text-align: start; }

 <div> <div class="main"> <div class="container"> <div class="label">Some Label</div> <div class="value">Some value</div> </div> <div class="container"> <div class="label">Some label 2</div> <div class="value">Other val</div> </div> <div class="container"> <div class="label">Third label</div> <div class="value"> <div>N/A</div> </div> </div> </div> </div>