Сначала сжимайте один элемент, а затем сжимайте второй в flexbox ⇐ CSS

[Anonymous]

У меня есть гибкий контейнер с двумя элементами, я пытаюсь сжать первый элемент до минимальной ширины, прежде чем сжимать второй.
Оговорка: я хочу, чтобы первый элемент не увеличивался за пределами размера контента.
Я знаю, что здесь, по SO, есть много подобных вопросов, но ни один из них не удовлетворяет моему последнему требованию.

Код: Выделить всё

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

Я довольно много возился с flex-grow, flex-shrink и flex-basis, но так и не смог добиться того, чего хотел. в розыске. Самое близкое, что я нашел:

Код: Выделить всё

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

Сначала метка уменьшается, но проблема в том, что она увеличивается настолько, насколько это возможно, если есть место, создавая большой разрыв между метками и значения.
Есть идеи, как заставить это работать?

Подробнее здесь: https://stackoverflow.com/questions/793 ... in-flexbox