Flexbox中先收缩首个元素再收缩第二个的布局实现问题

我有一个包含两个元素的flex容器，希望实现先将第一个元素收缩至其min-width后，再对第二个元素进行收缩。需要注意的是，第一个元素不能超出自身内容尺寸进行扩展。

补充尝试方案 #

感谢下方的回答，这里有一个去除冗余规则的可行方案：

CSS 代码 #

.p {
  display: flex
}

.label {
  flex-basis: 50px; /* 元素收缩的最小宽度 */
  flex-grow: 1;
  max-width: max-content; /* 限制元素的最大扩展宽度，不超过自身内容尺寸 */
}

HTML 代码 #

<div class="p">
  <div class="label">
    这个长标签应该先收缩并显示省略号
  </div>
  <div class="values">
    我不希望这个内容在标签收缩到最小宽度前就被收缩，它应该紧挨着标签，两者之间不能有大间距
  </div>
</div>

方案存在的问题 #

该方案确实能让label先收缩，但存在问题：当有剩余空间时，label会尽可能扩展，导致label和values之间出现较大间距。

内容的提问来源于stack exchange，提问作者elcye