Thanks for filing this bug.

This is similar to bug 1509104 where display:flex on an <input> element caused the flexbox highlighter to look funny.
Even though you can set display:flex on an <input>, and even though doing so causes the computed value of display to be flex, the actual display type isn't flex. Some elements just never behave as flex containers it seems.

However, testing further with <button> elements, I can see that setting display:flex does work on those elements.
For example, this simple html test case works as expected:

data:text/html,<button style="display:flex;width:200px;height:200px;justify-content:end;align-items:end">test</button>

This creates a flex container with a single item which is positioned correctly according to the flex positioning scheme.

So I think it might be a problem with the flexbox highlighter not displaying properly instead.
Indeed, I think it gets confused with the button's padding maybe.

Your idea of warning users when display:flex has no effect is a really good one though, and I think it belongs more to bug 1509104. So I'll comment about that there.
And let's keep this current bug to address the highlighter display.

(In reply to Vincent from comment #0)

It could have warned me that the display: flex I set on a <button> element
would not work (and likewise, apparently, for <fieldset> and <legend>:
https://stackoverflow.com/a/35466231).

Historical note: that stackoverflow post's mention of button/fieldset/legend is referring to this post from mid-2016:
https://stackoverflow.com/questions/35464067/flexbox-not-working-on-button-or-fieldset-elements

But in fact, we fixed display:flex to work on <button> in late 2016, in this bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=984869
(and we fixed it earlier for fieldset in https://bugzilla.mozilla.org/show_bug.cgi?id=1230207 )

Ah, I think that stackoverflow post was in fact hitting bug 1397768. (the sample markup uses "align-items:center" and "justify-cotnent:center", which were indeed problematic on buttons until bug 1397768 was fixed)

That bug was fixed in Firefox 63 (which shipped after that stackoverflow post from comment 0).

Anyway: I do see the the highlighter overlay being mispositioned in buttons, and patrick's data-uri-testcase from comment 1 demonstrates that well. So yes, let's use this bug to cover that.