Set Collapsing Priority Without Applying Flex To CSS Items?

I have a

element that is styled to list its inner
• elements horizontally: one is the 1st number | two is the 2nd number | three is the 3rd number | four is th

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

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