Chrome fails to apply default "align-items:stretch" to radio button as a flex item |
||
Issue descriptionChrome Version: 63.0.3218.0 (Official Build) dev (64-bit) OS: Ubuntu 17.04 What steps will reproduce the problem? (1) Visit https://jsfiddle.net/671Lebj2/ What is the expected result? Orange boxes should all be approximately the same height. What happens instead? The first two orange boxes are too short. (They don't stretch to the container's height.) Please use labels and text to provide additional information. This is a flex container, which has "align-items:stretch" by default. This means its auto-height flex items should all stretch to the height of the container (as long as they don't have their own custom "align-self" value): https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-stretch However, the radio button and checkbox aren't stretching like this, for some reason. Firefox 55 and Edge 15 produce the correct expected results. Chrome 63 and Safari 10.1 produce the buggy results. (Actually, Safari 10.1's results are worse than Chrome -- in Safari, the 3rd box -- for the button -- is also too short.)
,
Sep 26 2017
Here's an approximate reference case, where I've simply added "height:96px" to all of the flex items: https://jsfiddle.net/671Lebj2/1/ (note the "/1" on the end -- that's the reference version) (This reference case demonstrates that these widgets *will accept* a larger height, if it's explicitly specified. So, I don't see any reason why they shouldn't get their height stretched via align-items:stretch in the original testcase here.)
,
Sep 26 2017
I filed https://bugs.webkit.org/show_bug.cgi?id=177503 on this issue in WebKit, BTW.
,
Sep 27 2017
Thanks for the report! |
||
►
Sign in to add a comment |
||
Comment 1 by dholb...@gmail.com
, Sep 26 2017