Stretch items elements height in a Flexbox nav with fixed height - html

Question

I have a navigation, with fixed height, that use the flexbox layout module. It have two items (ul elements) where in one I want that its li tags take all the height of the nav and the other one I want that its li tags behave normally. I tought that assigning display:block to the li tags that I want they take all the height of the nav would work, but it behaves as a 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

Short answer is to use nested flexbox.
Remove align-items: center; from nav, so that flex items can stretch (default behavior) to the same height as the container.
Reset the margin by adding ul { margin: 0; }, so that no top and bottom margins.
Remove all the float and inline-block, you don't need it in flexbox layout.
Apply display: flex; to all - nav, ul, and li.
Finally add align-items: center; to the li to center the text vertically.
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>
Update
Modified version for just the left side fully stretches to height, and the right side behaves as inline elements.
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

Just add height: 100% to both the ul and 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>