Closed Bug 1583063 Opened 5 years ago Closed 5 years ago

Flex element adjusts differently between reloads, different from Chrome

Categories

(Core :: Layout: Flexbox, defect)

defect
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 1316534

People

(Reporter: Harald, Unassigned)

Details

(Keywords: site-compat)

Attachments

(1 file)

Attached image image.png

STR: https://firefox-devtools-tour.glitch.me/demos/test-case-flex-width/

Refresh a few times.

The top and lower input fields (incl buttons) 100% of the element, but the on some refreshs tha upper one ends up overflowing. I could not reproduce this in Chrome.

I always see the overflow, fwiw.

I always see the overflow, too.

Reduced testcase for the overflow:

data:text/html,<div style="display:flex;float:left;border: 5px solid red"><input type="number" style="flex-basis:1px">

This is a version of bug 1316534, and the "explicit" size here is in forms.css:

input[type="number"] {
  [...]
  inline-size: 20ch;

https://searchfox.org/mozilla-central/rev/153feabebc2d13bb4c29ef8adf104ec1ebd246ae/layout/style/res/forms.css#981,984

(This is an especially weird case of bug 1316534 because (a) the "specified size" is applied by a UA stylesheet rule, and (b) that specified size is actually lower than the min-content size, apparently.)

Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: