表格单元格内的 Flex 框或宽度：尽管 flex-shrink：0，但 min-content 会缩小

Question

在使用自动布局的表格内，我有一列包含一个我不想缩小其子级的弹性框：

<table>
  <tr>
    <td>Very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long content.</td>
    <td>
      <div style="display: flex; background: #fcc">
        <div style="flex-shrink: 0">Test content</div>
        <div style="flex-shrink: 0">Test content</div>
        <div style="flex-shrink: 0">Test content</div>
      </div>
    </td>
  </tr>
</table>

我所期望的是弹性框不会缩小，至少只要其他表格列可以进一步缩小就不会缩小。相反，我看到的是（至少在 Chromium 和 Firefox 中）弹性框比其内容更窄，导致其部分内容溢出表格单元格，尽管其他表格列有很大的缩小潜力进一步。

我发现将width: max-content 分配给弹性框似乎可以解决这种情况下的问题。这甚至可以在没有 flex-shrink 样式的情况下工作。有趣的是，width: min-content 我看到与表格相同的行为：

<div style="display: flex; background: #fcc; width: min-content">
  <div style="flex-shrink: 0">First column</div>
  <div style="flex-shrink: 0">Second column</div>
  <div style="flex-shrink: 0">Third column</div>
</div>

尽管项目没有因为flex-shrink: 0 而收缩，但弹性盒子的宽度似乎是它的项目正在缩小（并且文本会换行）时的宽度。有趣的是，在 flex box 上设置 white-space: nowrap 会改变这一点，并且 flex box 的大小会再次匹配其内容。

width: min-content 和表格示例的共同点似乎是，如果阻止其项目收缩，则弹性框的内在最小宽度计算错误。

虽然我可以使用width: max-content 或white-space: nowrap 在这个简化的示例案例中解决问题，但在更复杂的情况下，我想在表格列中放置一个复杂的弹性布局，其中一些项目缩小而另一些不，此解决方法将不起作用。所以我想深入了解一下：是否有适当的方法将弹性框的宽度设置为其项目的最小宽度？我看到的行为是浏览器错误，还是遵循 CSS 标准？

Answer 1

似乎 Firefox 和 Chromium 中的行为实际上都是错误的。

我已将此作为错误报告给Chromium 和Firefox。