Bugzilla

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.

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.

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.