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)
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.
Comment 1•9 years ago
|
||
[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
Updated•9 years ago
|
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
Comment 2•9 years ago
|
||
(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
Comment 3•9 years ago
|
||
I've noticed that the size of the input depends on which font the input is using.
http://codepen.io/MattyBalaam/pen/VaJjVq
Updated•2 years ago
|
Severity: normal → S3
Updated•3 months ago
|
You need to log in
before you can comment on or make changes to this bug.
Description
•