I have some heading elements with bottom borders. When the headings wrap, I have problems like this:
Of course, I could prevent wrapping, but then that could cause other problems and make for ugliness using or not using overflow.
While working in Chrome Tools, I had been noticing a number of possible values for the “display” CSS attribute. There is one that I came across that helped me out with a problem: flex.
Just like “block”, “inline”, and “inline-block”, “flex” affects the layout of HTML elements. There are actually a bunch of attributes that were introduced to CSS3 and can be found here:
Then I found that, just like many new CSS attributes, there are browser-specific prefixes that must be used. A useful example can be found here:
So, I created a LESS mixin to make it easy for referencing.
When all is said and done, the issue looks to be resolved: