Verkleinern Sie zuerst ein Element, bevor Sie das zweite in der Flexbox verkleinern ⇐ CSS

[Guest]

Ich habe einen Flex-Container mit zwei Elementen. Ich versuche, das erste Element auf seine Mindestbreite zu verkleinern, bevor ich das zweite verkleinere.
Die Einschränkung besteht darin, dass ich möchte, dass das erste Element nicht wächst über die Inhaltsgröße hinaus.
Ich weiß, dass es hier auf SO viele ähnliche Fragen gibt, aber keine davon erfüllt meine letzte Anforderung.

Code: Select all

My long label that should shrink first with an ellipsis

My values which I do not want to shrink before the label
shrunk to its min-width, and that should be next to the label
without a big gap between the two

Ich habe ziemlich viel mit Flex-Grow, Flex-Shrink und Flex-Basis herumgespielt, konnte aber nicht bekommen, was ich wollte gesucht. Das nächstgelegene, das ich gefunden habe, ist:

Code: Select all

.p {
display: flex
}
.label {
flex-basis: 50px;
flex-grow: 1;
flex-shrink: 0;
}
.values {
flex-grow: 0;
flex-shrink: 1;
}

Das Label wird zwar zuerst kleiner, aber das Problem besteht darin, dass es so weit wie möglich wächst, wenn Platz vorhanden ist, wodurch eine große Lücke zwischen den Label entsteht und Werte.
Irgendeine Idee, wie ich es zum Laufen bringen könnte?