When a <table> is placed within an inline-flex container that has a flex-direction of column, Safari displays the table with a different cross-size compared to Chrome and Firefox. This discrepancy makes me question if Safari's default display for tables in this scenario is correct.
Safari 16.3
https://i.sstatic.net/e7Dmo.png
Chrome 110 and Firefox 110
https://i.sstatic.net/ZBxBJ.png
Is Safari's display incorrect here? If not, what is the reasoning behind its sizing?
I have looked at the Cross Size Determination in the flexbox specification, but I am unsure of how it applies to this specific case.
Additionally, I have searched the WebKit Bug Tracker, but did not find any issues related to inline-flex containers and tables.
.container {
display: inline-flex;
flex-direction: column;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
}<div class="container">
<table>
<tr>
<td>the quick brown fox jumps over the lazy dog</td>
</tr>
</table>
</div>