1701447 - Two side-by-side tables - first rows have different heights in Firefox, same heights in Chrome

Status: RESOLVED INVALID

(Core :: Layout: Flexbox, defect)

Description

[Vinay Sajip]

Attachment: Screen shot showing row height discrepancies.

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:87.0) Gecko/20100101 Firefox/87.0

Steps to reproduce:

Viewed this page: https://m.saraswat.org.uk/sounds_bug.html in both Firefox 87.0 and Chromium 89.0.4389.90 - the appearance was different in the two browsers.

Actual results:

The page contains two tables, side-by side. One table starts like this:

<table class="letter-table table-bordered table-striped">
<tbody><tr><th colspan="8">Vowels</th></tr>

The other starts like this:

<table class="letter-table table-bordered table-striped">
<tbody><tr><th colspan="20">Consonants</th></tr>

The rows have the same height in Chromium, but unequal heights in Firefox.

Expected results:

The rows should have the same height in Firefox.

Comment 1

[Vinay Sajip]

Attachment: The complete HTML for the page that demonstrates the problem.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of Chrome 91 (showing the same rendering as Firefox)

Chrome 91 dev agrees with Firefox's rendering.

This new behavior was an intentional change that Firefox and Chrome both made, to align with the spec (and to remove a special quirky thing that only happened for tables, and was really an accident/bug).

If you want the old behavior back, you can add align-self:flex-start to the table elements in your testcase; that explicitly prevents them from stretching.