1067136 - font-size of input element with "flex: 1" in flex container affects input's width, eventually overflowing from its container

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Merih Akar]

Attachment: testcase.html

An input element inside a flex container, with "flex: 1", overflows from its container if its font-size is big enough.

In the testcase, all of the children of flex container should be inside of red area. It is rendered properly in Firefox 32, Chrome 37, and Safari 7.

Note that I haven't tested this in beta and aurora channels, they can also be affected.

Comment 1

[Daniel Holbert [:dholbert]]

This is a result of "min-width:auto" (bug 984711 / bug 1015474) -- the <input> refuses to get any smaller than its min-content width. It should do what you want if you specify "min-width:0" on the <input>.

(In reply to merihakar from comment #0)
> In the testcase, all of the children of flex container should be inside of
> red area. It is rendered properly in Firefox 32, Chrome 37, and Safari 7.

I don't believe any of those implement "min-width:auto" -- that's a relatively recent spec change.

There might be an open question on whether the min-content width of an <input> element should be so wide, though.

Comment 2

[Daniel Holbert [:dholbert]]

In other words, this behavior is required by the flexbox spec. (modulo the question of what the min-content width of an <input> should really be.)

Comment 3

[Daniel Holbert [:dholbert]]

I get similar results in Chrome if I add "min-width: -webkit-min-content;" to the input element.  (emulating min-width:auto support)

They seem to have a bit smaller min-content width for <input> elements than we do, but it's still enough to cause overflow in this testcase. (and it grows with the font-size -- it overflows by quite a bit if you increase the font-size)

So, I'm resolving this as INVALID since this is correct per-spec, and interoperable aside from the fact that we're the only engine to have implemented "min-width:auto" yet.

For spec details, see http://dev.w3.org/csswg/css3-flexbox/#min-size-auto

Comment 4

[Merih Akar]

Thanks for the explanation. I've missed those changes, obviously this is not a bug.