1302834 - Flexbox grow and shrink doesn't work on input number

Status: RESOLVED INVALID

(Core :: Layout: Form Controls, defect)

Description

[tim]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:48.0) Gecko/20100101 Firefox/48.0
Build ID: 20160817112116

Steps to reproduce:

1. Create a container with display flex.
2. put some elements with it and an number field that you want to grow or shrink.
3. Apply the flex property to those elements.

CodePen example: http://codepen.io/faroer/pen/WGwppm


Actual results:

The input field doesn't shrink in width. It overflows outside the container. This only happens in Firefox. Other browsers work fine.


Expected results:

The input field should shrink in width while both buttons appear on the edge of the container.

Comment 1

[Loic]

Could you attach a screenshot of the rendring on your machine. It could be specific to OSX.

Comment 2

[Daniel Holbert [:dholbert]]

The issue is clearer if you add a border to the flex container, as shown here: https://codepen.io/anon/pen/woMqWG

With that tweak, you can see the issue that Tim was reporting -- the input & buttons overflow the flex container.

This isn't a bug, though [hence resolving as INVALID].  It actually happens in *all* browsers (I tested Firefox, Chrome, and Edge). It's part of the "implied minimum size" piece of the flexbox spec (which is enabled by the default "min-width:auto" behavior) -- browsers prevent flex items from shrinking below their intrinsic size, which in this case is the default width of the <input> element.

Chrome happens to give that element a *smaller* intrinsic size than Firefox or Edge give it (specifically because of the min=1 max=10), so there's less overflow in Chrome than in other browsers.  (You can see the smaller intrinsic size by loading this data URL in Firefox vs. Chrome: data:text/html,<input type="number" min="1" max="10">).  But that difference is just a (nice) Chrome rendering quirk -- it's not a bug in other browsers.  And you can make your codepen look just as bad in Chrome if you remove min/max attributes from the <input> element to avoid getting that special quirk.

ANYWAY -- Tim, you can work around this flexbox behavior by suppressing the "intrinsic minimum size" feature -- to do that, just give the <input> "min-width: 0" (or a larger value, if you'd like it to have some small-but-nonzero minimum. "min-width: 2em" might be appropriate, for example.)

Here's a modified codepen with that tweak, which I think behaves as you expect: https://codepen.io/anon/pen/mOVMEb