1190884 - Textarea resize fails if element has "flex:1" (because that breaks the connection between 'height' and the element's actual height)

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Nicolas Hoffmann]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0
Build ID: 20150630154324

Steps to reproduce:

Use this demo: http://codepen.io/raphaelgoetter/pen/NqPQBa?editors=110 
and try to resize the textarea.


Actual results:

You can't resize it.


Expected results:

I suppose that we could resize it (like on Opera).

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Here's a reduced testcase. Chrome allows the textarea to be resized here; we do not.

Notes on a few other variants:
 - If I modify this testcase to give the textarea "flex:none", then we allow it to resize.
 - If I modify this testcase to give the flex container a fixed height (so that "flex: 1" unambiguously produces a particular height on the textarea), then Chrome agrees with us in *not* allowing the textarea to resize.

Comment 2

[Daniel Holbert [:dholbert]]

Oh, this makes perfect sense actually.
 (1) When you attempt to resize the textarea, we adjust the "height" property. (The adjustments can be seen, live, in the devtools inspector.) Those adjustments are happening correctly.

 (2) BUT: the textarea's 'height' property doesn't actually influence its size, because "flex-basis" is really what counts, and it has "flex:1" which sets its flex-basis to 0 (instead of to its default value, "auto", which defers to the height property)

So I think this is working as it should, though it's a bit counterintuitive. (It's also possible bug 1055887 might shake things up here, but probably not too much.)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 2: just a flex item with "flex: 1" and a tall height

Here's a simpler testcase with no resizing, just a tall 'height' on a flex item with "flex:1". We ignore the 'height' [just as we ignore the resize-triggered 'height' in the previous testcase].   Chrome honors it for some reason; I'm not clear why.

Comment 4

[Daniel Holbert [:dholbert]]

FWIW, Microsoft Edge matches us on testcase 2. (They also match us on testcase 1, though the main reason for that is they don't support 'resize' I think -- at least, it's squiggly-underlined in their devtools. But their rendering of testcase 2 makes me think they would still match us on testcase 1 if they did support 'resize'.)

Comment 5

[Daniel Holbert [:dholbert]]

So I'm going to say that this is INVALID, because:
 (1) 'resize: vertical' works by influencing the 'height' property.
 (2) 'flex:1' prevents the 'height' property from actually influencing the element's actual height (because it sets flex-basis to 0% instead of 'auto')

Hence, it makes total sense that 'flex:1' breaks the influence of 'resize'.

This does happen to work in Chrome, since they don't agree with us/Edge on (2). They do agree with us (and refuse to resize) if you change "flex: 1" to "flex: 1 0px", though, FWIW. Tweaked Codepen to demonstrate that (broken in Chrome just like in Firefox): http://codepen.io/anon/pen/bVEWZy

WORKAROUND: The correct way to do this is to *not* break the influence between 'height' and sizing. So, preserve 'flex-basis: auto' -- i.e. use "flex: 1 auto' instead of 'flex: 1'. Tweaked Codepen to demonstrate that (working in both Firefox & Chrome): http://codepen.io/anon/pen/XmXRQp

Comment 6

[Daniel Holbert [:dholbert]]

I filed https://code.google.com/p/chromium/issues/detail?id=531656 on the Chrome behavior here, BTW.