I don't know if it is a bug or wanted behavior, so i'm asking here before going to github.
First things first, I'm using the flex grid.
Consider the following code :
<header class="row"> <nav class="columns"> <ul class="menu align-stretch"> <li class="active"><a href="#">Short 1</a></li> <li><a href="#">Short 2</a></li> <li><a href="#">Very long menu item goes here</a></li> </ul> </nav> </header>
Consider the case when the third menu item wraps on a second line.
The active class is applied to the a tag by the framework.
So even if the li tags are stretching to the full height of their parents, the a tags do not.
Which creates an issue if you have a background color applied on you menu items, as the first item's active background color will not take the full height of the third item.
I tried every combination of align-self-stretch to try and make the a tags take the full height of their parent with no success.
Any input is much appreciated.