1505344 - Flexbox child item height changes height to match that of tallest, regardless of wrap

Status: RESOLVED WORKSFORME

(Core :: Layout: Flexbox, defect)

Description

[tomoliverharrison]

Attachment: firefox-bug.jpg

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36

Steps to reproduce:

1. Go to this page:

http://corganisers.staging.wpengine.com/get-started/

2. Scroll to the 'in this section' section

The 'find my local hub' box has a height that matches the 'About us' and 'Membership' panels above. It should be shorter and based on it's own height.

3. Rollover a link in the 'about us' box. This will change the height of the 'find my local' block if it loaded correctly on page load. i.e if the bug does not happen on page load, it will on rollover.

4. Open inspector

The panels now adjust their height to how they should be.



Actual results:

The flexbox layout is incorrect. All flex children take the height of the tallest item. This mostly happens on page load, but sometimes loads correctly and happens the second you roll over a link within a flexbox child. If inspector is open the problem does not occur.



Expected results:

The child items should be working out their height per row based on the highest item. It's impossible to solve the bug as it occuring is dependant on the inspector being open. You open the inspector to try and investigate and the problem is gone.

Comment 1

[Daniel Holbert [:dholbert]]

Thanks for the bug report!

I can reproduce this in Firefox release (v63), but not in Firefox Nightly (v65), so it seems to have been fixed (or at least mitigated).

Specifically, "mozregression --find-fix" tells me it was fixed in this range:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=e088bb62f286425a30a925fc3355eb40c92f79c1&tochange=05b68d1eaa7e1965ad7b989e48da9c47fb537712

...which means it was almost certainly fixed by Bug 1490890.

That bug's patch wasn't intended to change layout behavior, so the bug likely still exists but is hard to test.

I'm guessing this is similar to bug 1503173 (which was largely "fixed" by the same bug, though that one still reproduces if I zoom in+out, unlike this bug's affected-page).

Since I can't figure out any way to make this one reproduce in Nightly (zooming in+out doesn't trigger it), I'm going to call this "WORKSFORME" with a dependency on bug 1490890.

Comment 2

[Daniel Holbert [:dholbert]]

(though if we can figure out a way to trigger this in Firefox 64 Beta or 65 Nightly, please reopen w/ further details)