Как растянуть флекс-элементы на всю высоту?

Question

[Сергей Бурдужа]

Есть менюшка

ul.nav-menu
		li.nav-menu__item.nav-menu__item--catalog
			a.nav-menu__link(href="#") Каталог товаров
		li.nav-menu__item.nav-menu__item--order
			a.nav-menu__link(href="#") Вязание на заказ
		li.nav-menu__item.logo
			a.nav-menu__link(href="#")
				img(src="assets/i/logo.svg", alt="logo" width="154" height="74")
		li.nav-menu__item.search.nav-menu__item--search
			a.nav-menu__link(href="#")
				svg.search__icon
					use(xlink:href="#search")
		li.nav-menu__item.basket.nav-menu__item--basket
			a.nav-menu__link(href="#")
				svg.basket__icon
					use(xlink:href="#basket")
				span.basket__text Корзина: пока пуста

.nav-menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.nav-menu__item {
	display: block;
	height: 100%;
	border: 1px solid green;
}

Выглядит так


Нужно, чтобы элементы растянулись на всю высоту как на макете


Вроде бы задача несложная, но я не догоняю как это сделать.
Видать, когда задаешь контейнеру display flex, то размеры элементов сужаются до содержимого. А как высоту на весь контейнер задать?

Заранее благодарен.

Comments

[FeST1VaL]

ну как вариант обернуть все блоки еще флексами в которых вы уже и будете центрировать или же поиграйтесь с align-items:

[Сергей Бурдужа]

Артем Будин,
я задал align-items stretch контейнеру, а элементам align-items center, и получилось.
Спасибо.

Answer 1

[Борис Свиридов]

Для одинаковой высоты элементов в строке установить align-items, align-content: stretch