1473273 - Flex alignment properties not respected for <button> element

Status: RESOLVED DUPLICATE of bug 1397768

(Core :: Layout: Form Controls, defect)

Description

[Szmozsánszky István [:flaki]]

Attachment: Screenshot from the codepen - issue reproduced in Firefox 63 (Nightly)

The elegant and canonical way of aligning <button> element labels to the bottom of the element seems to involve setting display: flex and using the appropriate alignment properties (justify-content & align-items) to position the label. Other techniques seem to involve either wrapping the button text in another element or require the knowledge of a pre-set button height.

Sadly, it seems that the flexbox-technique does not work in Firefox (tested in Nightly 63), while in an up-to-date version of Chrome (Chromium) this seems to work just fine.

Attached some screenshots, and there is a reduced testcase at:
https://codepen.io/flaki/pen/gKyZGJ

Comment 1

[Szmozsánszky István [:flaki]]

Attachment: Screenshot from the codepen - the same code seems to work in latest Chromium

Comment 2

[Daniel Holbert [:dholbert]]

Thanks for the report! This is already filed as bug 1397768.  See bug 1397768 comment 5 (and 1397768 comment 7) in particular.

I have an idea for how to fix this in bug 1397768 comment 12, but haven't had time to pursue it yet.