我有一些显示键/值列表的元素，我使用css网格来确保“key”span“column”是相同的宽度，所以列表看起来很漂亮，min-content是一个很好的方法。
但是，如果父DIV的宽度太小而无法显示所有内容，我需要收缩键列，以便为“值”列给予更多空间，类似grid-column-template: 1fr 2fr的东西可以完成这一任务。
问题是我不能同时使用这两种设置。当面板很小时，min-content不能满足我的需要，当面板很大时，似乎没有其他东西能满足我的需要。
为了澄清，我需要做以下工作：

• 在任何时候，“键”跨度必须相同的长度。通常是最长的“单元格”的长度。
• 当div较宽时，“键”跨度必须为min-content：与最长的“单元”一样宽。
• 当div变窄时，“键”跨度必须折叠，这样“值”才不会溢出。

CodePen

.panel {
  display: grid;
  gap: 0 20px;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr 2fr;
  margin-bottom: 20px;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="panel thin">
  <span class="text-ellipsis">key:</span>
  <span class="text-ellipsis">value</span>
  <span class="text-ellipsis">some really long key that should be truncated:</span>
  <span class="text-ellipsis">some really long value that should be truncated</span>
</div>