Set collapsing priority without applying flex to CSS items?

Question

I have a <ul> element that is styled to list its inner <li> elements horizontally:

one is the 1st number | two is the 2nd number | three is the 3rd number | four is the 4th number

This works fine for shorter content, but these "cells" need to collapse with varying priorities if there's not enough space to display them without wrapping .

...Something like this:

one is the first number | two is the... | three is the... | f...

So, the first cell should always display 100% of its content, the second two cells should display ~40-50% (fluidly or as a hard-coded width/percentage), and the 4th cell can take up whatever's left (if anything)... without overflowing the parent container's bounds.

Oh, and these items all need to be equally vertically-aligned for aesthetics.

Possible to do cleanly without flex/JS? I'm not sure. The idea is to create something visually appealing that can display as much information from the listed sections as possible within that single line, with the first one always displaying all of its content without ellipsis/wrapping/overflow and taking the highest priority in that line.

---

EDIT: I just want to clarify that setting min-width won't work here because the content could render in less than the min-width . (consider "abc" instead of "two is the..." ... That should only take the space of "abc" for <li> .

Answer 1

So this what I can conjure up with flexbox - I guess this will get you started:

1. A flexbox of ul with white-space:nowrap to all the flex children to keep the text content in a single line.

2. Added ellipsis to the flex children except the first one as per your requirement.

3. The magic here is done by:

    ul > li:first-child { flex: 0 1 auto; } ul > li:nth-child(2) { flex: 0 1 auto; } ul > li:nth-child(3) { flex: 0 2 auto; } ul > li:nth-child(4) { flex: 0 3 auto; } 

   a. For the first flex child, we disable flex-grow

   b. For the other flex children, we use relative flex ing.

Let me know your feedback on this. Thanks!

 ul { list-style-type: none; display: flex; padding: 0; margin: 0; } ul > li { white-space: nowrap; padding: 5px; } ul > li:not(:last-child) { border-right: 1px solid; } ul > li:not(:first-child) { overflow: hidden; text-overflow: ellipsis; } ul > li:first-child { flex: 0 1 auto; } ul > li:nth-child(2) { flex: 0 1 auto; } ul > li:nth-child(3) { flex: 0 2 auto; } ul > li:nth-child(4) { flex: 0 3 auto; } 

 <ul> <li>one is the 1st number</li> <li>two is the 2nd number</li> <li>three is the 3rd number</li> <li>four is the 4th number</li> </ul>