Nested flex box with image has extra height [duplicate] - html

Question

This question already has answers here:
Mystery white space underneath image tag [duplicate]
(3 answers)
Closed 6 years ago.
I'm working on a navigation bar for a page using only HTML and CSS. It should look like this, with the logo setting the height of the containing div, then with the text vertically centered in other divs next to it.
What it should look like:
I've tried to do this by setting up some nested flex boxes. The idea is that:
The container (nav-holder) stretches to fit the tallest content
The second container (nav-item) should all be as tall as its parent
The third container (nav-cont) should be as tall as its own content, and should be vertically centered inside nav-item
Instead, I'm ending up with an odd extra bit of space at the bottom of my logo inside nav-cont, and I can't work out where it's coming from.
It looks like this:
What it really looks like:
HTML code:
<div id="header">
<div id="nav-holder">
<div class="nav-item">
<div class="nav-cont"><img src="images/placeholder-logo.jpg"/></div>
</div>
<div class="nav-item">
<div class="nav-cont">Listings</div>
</div>
<div class="nav-item">
<div class="nav-cont">Services</div>
</div>
<div class="nav-item">
<div class="nav-cont">About</div>
</div>
<div class="nav-item">
<div class="nav-cont">Blog</div>
</div>
<div class="nav-item">
<div class="nav-cont">Contact</div>
</div>
</div>
</div>
CSS Code:
#nav-holder {
background-color: blue;
display: flex;
}
.nav-item {
background-color: yellow;
display: flex;
align-items: center;
margin-right: 0.5em;
}
.nav-cont {
background-color: green;
}
Attempted fixes:
Checked to see if there was a margin or padding set for images or for divs in general.
Looked for information in the most similar solved problem on StackOverflow ("CSS flexbox vertically/horizontally center image WITHOUT explicitely defining parent height")
Went through a couple of flexbox tutorials to see if there were any similar issues described, including "Solved by Flexbox" on GitHub and "Dive into Flexbox" by Greg Smith

Answer 1

I have took at look at your code and changed some CSS to try to get the idea of what you want.
#nav-holder {
background-color: blue;
display: flex;
}
.nav-item {
background-color: yellow;
display: flex;
align-items: center;
margin-right: 0.5em;
padding: 10px;
}
.nav-cont {
background-color: green;
width: 70px;
text-align: center;
}
Here is a Jsfiddle:
https://jsfiddle.net/r3msjtnL/
You had to change the nav-cont div to a pixel and float the text in the center, so it is not unbalanced. Also, I added a padding to make space around your nav.items.
Update:
If you do not want your buttons being fixed to a specific pixel, attempt changing the width to a percentage (%) instead !
If this helped vote up !