1088586 - Wide input elements when using flexbox

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Erik Brännström]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:34.0) Gecko/20100101 Firefox/34.0
Build ID: 20141020184313

Steps to reproduce:

Added an input element inside a flexbox container with grow: 1 on both elements.


Actual results:

The input element did not get a width of less than 129 pixels, no matter how small the container became.


Expected results:

I would expect the input element to automatically adapt to the container size well below 129 pixels.

Comment 1

[Erik Brännström]

The problem is demonstrated at http://jsbin.com/cevaheyuti/4/. In Chrome, the two boxes are kept at the same size even when the window is made really small, but not in Firefox.

It might be of interest to note that my original problem is slightly different, though this was the simplest example I could make to demonstrate this. In fact, in the example above, the problem can be resolved by setting a minimum width on the input element, but that is not enough when I nest flexboxes.

In http://jsbin.com/cevaheyuti/7/ I have flexboxes within a flexbox, where the problem is also apparent. However, in this case it does not help setting a minimum width on the input elements, instead the input elements only respect the flexbox sizing once the grouping div receives a minimum width. This is strange, since the fake input elements (which is a div) works without their parents having a min-width.

Comment 2

[Daniel Holbert [:dholbert]]

This behavior is correct, per spec, and it comes from "min-width:auto" (re-introduced in the flexbox spec, relatively recently).  This feature says that the flex item (the <input>) refuses to shrink below its min-content size (i.e. its size if you floated it with width:auto), by default.

http://dev.w3.org/csswg/css-flexbox/#min-size-auto

We added this behavior in bug 1015474. Chrome has apparently not yet added it (which means we see a bug like this filed weekly, it seems. :))

Comment 3

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #2)
> This feature says
> that the flex item (the <input>) refuses to shrink below its min-content
> size (i.e. its size if you floated it with width:auto), by default.

(Sorry, the <input> isn't the flex item -- its parent, the div w/ class="group" is the flex item.)

To disable this behavior, you need to add "min-width: 0" to the flex item that you'd like to be shrinking more. In this case, that means add "min-width: 0" to the rule for ".group {".

Comment 4

[Daniel Holbert [:dholbert]]

I couldn't find a bug on file for this in Chrome/Blink, so I filed one, to make sure this is on their radar at least:  https://code.google.com/p/chromium/issues/detail?id=426898

Also, for reference, there's some older spec text on this feature that's a bit easier to read than the current spec -- that's here:
 http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#min-size-auto
The details have changed slightly since then (hence the spec text having evolved), but the idea is the same, and the older text is slightly more human-readable.