navbar buttons with flex container, how to make equal height?

[r_tist]

Hi,

The buttons were equal height until I changed the text on one that forced it to wrap to a 2 liner. The buttons are still balanced out, but their background boxes are now all different heights compared to the 2 liner.

I will need it so the 1 line button link's background boxes have the same height as the 2 liner.

.btn-nav-flex-container {

  display: flex;

  vertical-align: middle;

    align-items: center;

}

.btn-nav {

    background-color: #ccc;

    border: 2px solid #ccc;

    color: #000;

    padding: 1px 22px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    width: 30%;

    font-weight: 600;

    margin: 9px 2px;

    border-radius: 14px;

    -webkit-transition-duration: 0.4s; /* Safari */

    transition-duration: 0.4s;

    cursor: pointer;

}

What would you suggest in this case? Thank you.

[ALsp · Accepted solution]

You need to put an actual test page on the web and post a link, but in theory, when using flexbox for a menu, the element that will be equal in height, given links that wrap (not a good idea) would usually be the LI. To test that, assign a background color to the LI.

For a professionally coded flexbox menu from which to cull inspiration:

Maxi Menu Magic

That said, you need to decide between Flexbox and inline-block. They have vastly different results. Normally, for a horizontal menu you would use Flex for the LIs and the links would be display block.