Search code examples
htmlcssflexboxsafari

Table inside inline-flex incorrect sizing in Safari

When a <table> is inside an inline-flex container with flex-direction column, the cross-size of the table is different in Safari compared to Chrome and Firefox. I'm assuming Safari is incorrect here—who would want a squished table like that by default?

Safari 16.3

Safari screenshot

Chrome 110 and Firefox 110

Chrome and Firefox screenshot

Is Safari wrong here? If not, why is its size that?

I have read Cross Size Determination in the flexbox spec but I can't tell how it relates to this specific example.

I have also checked the WebKit Bug Tracker but I couldn't find anything related to inline-flex 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>

Solution

  • It appears this is a WebKit bug and it has been reported to Apple.

    I have tested it in Safari 17.2.1 and it is fixed in that version.