<select> with a specified min-height doesn't have its text centered if the containing element has display:flex AND align-items:center
Categories
(Core :: Layout: Form Controls, defect)
Tracking
()
People
(Reporter: itiel_yn8, Unassigned)
Details
See https://jsfiddle.net/y0jv32o9/ for a testcase.
Removing the align-items:center part makes the text center aligned.
Bug 1362907 is related, but in this case I'm aware that this is a known issue, but I would expect having align-items: center do its thing.
|
||
Comment 1•2 years ago
•
|
||
This is in fact exactly Bug 1362907, I think.
align-items:center isn't special in your testcase, and isn't actually a request to center the text there -- it's rather an instruction to center the select button within the flex container (which essentially does nothing, since the flex container is as tall as its sole child, so there's no room for centering or alignment at all).
Note that your testcase renders just the same (with top-aligned text) if you use align-items:start or end or baseline.
If you remove align-items entirely, then the text gets centered automagically because we get the default align-items:stretch behavior (you can also manually specify align-items:stretch to see the centered text). And that gets your expected-result because it makes the flex item (the select button) behave as if it had a definite pixel-valued height, basically, as required by the spec[1].
So this is essentially equivalent to the "specifying a min-height vs. specifying height (and min-height)" comparison in bug 1362907, with just-a-min-height situation having the text be top-aligned. It's just that here, in the "good" centered-text scenario, the definite height is imposed via flexbox stretch alignment (and that height ultimately is derived from the min-height, via the flexbox sizing to its item's size, and then turning around and imposing that size as the stretched size on all of its items).
[1] (see https://drafts.csswg.org/css-flexbox-1/#algo-stretch "...treating this used size as its definite cross size...")
Description
•