When you try to use flexbox in a button, it doesn’t render as it is supposed to , why is this so, and how do I fix this?
You would expect that it should work on different HTML elements as well, but when you try to apply the model to a button and render it in Firefox, it just wouldn’t render properly. (click on caption to view codepen)
As a good developer ensuring cross browser compatibility, this problem annoys me to no end.
Solution (inline block)
In the particular example above where we try to style the button, we could render the image and text as inline block. In that case, the image and text will align side by side.
But using this method, you won’t be able to easily get the image and text to align vertically (unless you use some margin or valign hack, which complicate stuff).
The more generic method
I didn’t believe it could work until I tried it out, the solution seems too simple. Apparently, by wrapping the button’s content with a “div” element, you can render the flexbox properly without any problems.
This way, you can still use flexbox for all your layout needs. But do note that having a content wrapper means that you have to remember to remove the background and border of your button to get the look that you want.
Why didn’t it work originally?
It all boils down to how the button is implemented in Firefox. For special elements, like buttons and form inputs, its safer to assume that structured differently across browsers.
This is because these special elements have unique responses that the browser have to take into consideration, so they are often rendered differently cross browser.
If you are searching for a more technical answer, you can use this thread as a starting point.
Any questions or issues, you can leave a comment here, or direct your query to my email.