Set collapsing priority without applying flex to CSS items?

Question

I have a

element that is styled to list its inner
• elements horizontally:

  one is the 1st number | two i

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 flexing.

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;
}

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