Как сделать, чтобы не растягивался на всю высоту родителя?

Question

[rxxxxxx]

Здравствуйте.
Есть вот такая структура:

<header class="header">
                <div class="logo">Thrivetalk</div>
                <div class="menu">
                    <a class="menu__item" href="#">Home</a>
                    <a class="menu__item" href="#">About</a>
                    <a class="menu__item" href="#">Services</a>
                    <a class="menu__item" href="#">Blog</a>
                </div>
                <a class="menu__contact_button" href="#">contact us</a>
</header>

Я их выровнял флексами в ряд:

Из-за того, что кнопка "contact us" высокая, весь header растягивается до нижнего края этой кнопки (как я понял):

Проблема в том, что все дочерние элементы header'а наследуют его высоту. То есть, вместе с хедером растягиваются и
его дочерние блоки, а в блоках ссылки:

Из-за этого при добавлении псевдокласса :hover на ссылку, он срабатывает, когда курсор ниже него.
Мне нужно, чтобы height ссылок был именно столько, сколько они на самом деле занимают.
Простите, если что-то неправильно объяснил
Спасибо

Comments

[Вадим]

https://qna.habr.com/q/1040924#answer_2011890

Answer 1

[wakenbyWork]

По дефолту display:flex; растягивает содержимое, нужно указать align-items: center | flex-start и так далее

Но было бы хорошо получить код в jsfiddle или в codePen

.class {
  align-items: flex-start;
}

Comments

[rxxxxxx]

Спасибо большое, работает