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.

 

JL