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

[Anonymous]

У меня есть гибкий контейнер с двумя элементами, я пытаюсь сжать первый элемент до его минимальной ширины, прежде чем сжимать второй.
Оговорка: я хочу, чтобы первый элемент не увеличивался за пределами размера контента.
РЕДАКТИРОВАТЬ: благодаря ответу ниже, вот рабочее решение без ненужных правил:
< div class="snippet">

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

.p {
display: flex
}

.label {
flex-basis: 50px; // How far it will shrink
flex-grow: 1;
max-width: max-content; // Limit how much it will grow
}

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

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

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

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