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.

.flex() {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;

Final Result

When all is said and done, the issue looks to be resolved: