Bugzilla

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 `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 -- it's just that here, in the good scenario, we're imposing the `height` via flexbox `stretch` alignment (and the 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...")

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 -- it's just that here, in the good scenario, we're imposing the `height` via flexbox `stretch` alignment (and the 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...")

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...")