Растягивать элементы высотой элементов в панели Flexbox с фиксированной высотой

Question

У меня есть навигация с фиксированной высотой, в которой используется модуль макета flexbox. У него есть два элемента (ul элементов), где в одном я хочу, чтобы его теги li принимали всю высоту навигации, а в другом я хочу, чтобы его теги li вели себя нормально. Я думал, что назначение display:block тегам li, которые, как я хочу, они принимают всю высоту навигации, будет работать, но оно ведет себя как display:inline-block.

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000;
    height: 65px;
}

nav ul {
  list-style-type: none;
  padding-left: 0;
}

nav ul li {
  float: left;
}

nav ul.item1 li {
  display: block;
  background-color: red;
}

nav ul.item2 li {
  display: inline-block;
  background-color: green;
}

<nav>
  <ul class="item1">
    <li>#1</li>
    <li>#2</li>
    <li>#3</li>
  </ul>
  <ul class="item2">
    <li>#4</li>
    <li>#5</li>
    <li>#6</li>
  </ul>
</nav>

Answer 1

Короткий ответ - использовать вложенный flexbox.

1. Удалите align-items: center; из nav, чтобы изгибаемые элементы могли растягиваться (поведение по умолчанию) до той же высоты, что и контейнер.

2. Сбросьте поле, добавив ul { margin: 0; }, чтобы не было верхнего и нижнего полей.

3. Удалите все float и inline-block, они вам не нужны в макете flexbox.

4. Применить display: flex; ко всем - nav, ul и li.

5. Наконец добавить align-items: center;li для центрирования текста по вертикали.

nav {
  display: flex;
  justify-content: space-between;
  background-color: black;
  height: 65px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

nav li {
  display: flex;
  align-items: center;
}

nav ul.item1 li {
  background-color: red;
}

nav ul.item2 li {
  background-color: green;
}

<nav>
  <ul class="item1">
    <li>#1</li>
    <li>#2</li>
    <li>#3</li>
  </ul>
  <ul class="item2">
    <li>#4</li>
    <li>#5</li>
    <li>#6</li>
  </ul>
</nav>

Обновление

Модифицированная версия только для левой стороны, полностью растягивается до высоты, а правая сторона ведет себя как встроенные элементы.

nav {
  display: flex;
  justify-content: space-between;
  background-color: black;
  height: 65px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

nav li {
  display: flex;
}

nav ul.item1 li {
  align-items: center;
  background-color: red;
}

nav ul.item2 {
  align-items: center;
}

nav ul.item2 li {
  background-color: green;
}

<nav>
  <ul class="item1">
    <li>#1</li>
    <li>#2</li>
    <li>#3</li>
  </ul>
  <ul class="item2">
    <li>#4</li>
    <li>#5</li>
    <li>#6</li>
  </ul>
</nav>

Answer 2

Просто добавьте height: 100% к ul и li.

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000;
    height: 65px;
}

nav ul {
  list-style-type: none;
  padding-left: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

nav ul li {
  float: left;
  display: flex;
  align-items: center;
}

nav ul.item1 li {
  background-color: red;
  height: 100%;
}

nav ul.item2 li {
  background-color: green;
}

<nav>
  <ul class="item1">
    <li>#1</li>
    <li>#2</li>
    <li>#3</li>
  </ul>
  <ul class="item2">
    <li>#4</li>
    <li>#5</li>
    <li>#6</li>
  </ul>
</nav>