inline-flex容器内Table在Safari中尺寸显示异常问题咨询

当<table>元素被放置在flex-direction: column的inline-flex容器中时，表格的交叉轴尺寸在Safari中的表现和Chrome、Firefox存在明显差异。Safari会将表格挤压到很窄的宽度，这显然不符合常规预期——默认情况下谁会希望表格被挤成这样？

各浏览器表现 #

Safari 16.3 #

Chrome 110 和 Firefox 110 #

疑问 #

请问Safari的这种表现是否属于错误？如果不是，为什么它会呈现这样的尺寸？

我已经阅读了flexbox规范中的「交叉轴尺寸确定」部分，但无法将其与这个具体示例关联起来。同时也检查了WebKit的Bug追踪系统，没有找到任何与inline-flex和表格相关的记录。

复现代码 #

CSS #

.container {
  display: inline-flex;
  flex-direction: column;
}

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

HTML #

<div class="container">
  <table>
    <tr>
      <td>the quick brown fox jumps over the lazy dog</td>
    </tr>
  </table>
</div>

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