css - Flexbox not working in buttons in Firefox -

css - Flexbox not working in buttons in Firefox -

apparently firefox doesn't display: flex on buttons. there way t right this?

css:

button { width: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } button div:first-child { -webkit-box-ordinal-group: 2; -webkit-order: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; } button div:last-child { -webkit-box-ordinal-group: 1; -webkit-order: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; }

html:

<button> <div> <p>first</p> </div> <div> <p>second</p> </div> </button>

live demo: http://jsbin.com/ziwadabo/2

tl;dr: set div within of <button>, , create that div display:flex.

see https://bugzilla.mozilla.org/show_bug.cgi?id=984869#c2 why display doesn't expect on <button> in firefox (and similar things don't work in firefox or webkit/blink, similar reasons).

here's modified jsbin: http://jsbin.com/ziwadabo/4/

css firefox flexbox