Closed Bug 1242914 Opened 9 years ago Closed 3 months ago

Firefox refuses to shrink <input> as a flex item, in codepen with nested flex containers

Categories

(Core :: Layout, defect)

45 Branch
x86_64
Linux
defect

Tracking

()

RESOLVED DUPLICATE of bug 1585485

People

(Reporter: info, Unassigned)

Details

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101 Firefox/45.0 Build ID: 20160125004010 Steps to reproduce: This code snippet demonstrates the problem on FF 45.0a2 http://codepen.io/anon/pen/YwaEzE Paddings of the input fields are not taken into account when computing flex item widths. Actual results: The lower input reaches out to the right of the <label>. Expected results: The lower input should match the width of the surrounding label as the upper does.
OS: Unspecified → Linux
Hardware: Unspecified → x86_64
Component: Untriaged → Layout
Product: Firefox → Core
[Tweaking bug description, since the bug description talks about 'padding' but I don't think the 'padding' property comes into play at all here] If you need a workaround, one simple one is to simply use "min-width: 0" on the <input>, as shown here: http://codepen.io/anon/pen/VeXVxd (That's often what you need when you're working with flexbox and something is overflowing for no clear reason.) The bottom line here is we're refusing to allow the <input> to shrink below its intrinsic minimum size, which is what the spec requires for flex items with the default "min-width: auto". So it's not clear to me that this is a Firefox bug. Having said that, we do disagree with both Chrome & Edge on the attached codepen, so maybe we're doing something wrong. I started reducing a testcase, and I ended up with something that Firefox & Edge agree on (and match the spec) but Chrome disagrees, so I filed a Chrome bug for that: https://code.google.com/p/chromium/issues/detail?id=581545 There may still be something else here, though, since Edge & Chrome both disagree with us on the original codepen. If someone can make a more-reduced testcase where Chrome & Edge disagree with Firefox, that'd be helpful in getting to the root of the problem.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: CSS: flex box is not computing padding of flex items → Firefox refuses to shrink <input> as a flex item
Summary: Firefox refuses to shrink <input> as a flex item → Firefox refuses to shrink <input> as a flex item, in codepen with nested flex containers
(In reply to Daniel Holbert [:dholbert] from comment #1) > If you need a workaround, one simple one is to simply use "min-width: 0" on > the <input>, as shown here: > http://codepen.io/anon/pen/VeXVxd Sorry, the codepen link in comment 1 is wrong - I made further exploratory tweaks & forgot that codepen would update the stuff behind that link. Here's a new codepen with what I meant to link to (only differing from the reporter's codepen in one way -- "min-width: 0" added on the <input>): http://codepen.io/anon/pen/rxdoEq
I've noticed that the size of the input depends on which font the input is using. http://codepen.io/MattyBalaam/pen/VaJjVq
Severity: normal → S3
Status: NEW → RESOLVED
Closed: 3 months ago
Duplicate of bug: 1585485
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.