Bug 253922 – Table flex-item inside inline-flex with column flex-direction has incorrect cross-size (width)

• Component: Layout and Rendering
• Status: RESOLVED FIXED

Created attachment 465439 [details]
Screenshot of Safari's incorrect rendering and Chrome and Firefox's correct rendering

HTML:

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

CSS:

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

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

In Safari 16.3 and Technology Preview 16.4 it renders the table too narrow (as if its width were min-content). Chrome 110 and Firefox 110 render it correctly with width as wide as the text.

JsFiddle reproduction: https://jsfiddle.net/1ox8cfnp/

[Ahmad Saleem]

Is this same as bug 253928?

I thought it might be related to that; this might just be two different symptoms of the same underlying bug.

[Radar WebKit Bug Importer]

<rdar://problem/107029563>

[zalan]

Created attachment 465921 [details]
[fast-cq]Patch

[EWS]

Committed 263001@main (13134c656ef8): <https://commits.webkit.org/263001@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 465921 [details].