Adaptative width with flexbox and flex-grow - html

Question

I'm trying to set up a menu bar with the
following template
I'm trying this with FlexBox but I can't figure out what's wrong. Here's the HTML :
<nav>
<ul>
<li id="navleft">
<img src="images/logo.png" alt="logo wikihow">
</li>
<li class="navothers">
<img src="images/contribuye.png" alt="contribuye">
<p>CONTRIBUYE</p>
</li>
<li class="navothers">
<img src="images/explora.png" alt="explora">
<p>EXPLORA</p>
</li>
<li class="navothers">
<img src="images/entrar.png" alt="entrar">
<p>ENTRAR</p>
</li>
<li class="navothers"><img src="images/mensajes.png" alt="mensajes">
<p>MENSAJES</p>
</li>
</ul>
</nav>
And I apply the following styles in CSS :
nav {
padding: 0 30% 0 30%;
}
nav ul {
display:flex;
justify-content:center;
align-items:center;
background-color: #93B874;
}
#navleft{
flex-grow:32;
flex-shrink:1;
}
#navleft img{
width: 144px;
vertical-align:center
}
.navothers{
flex-grow:1;
flex-shrink:4;
}
I get the following result
My problem is that all the elements in the right part (with the "navothers" class) dont have the same width ! They just adapt depending on the size of the text they have.
I may have mixed a lot of things, what have I done wrong ?

Answer 1

Your flex-grow value for #navleft is too big, and your container is too small. Your items can't grow they don't have enough room. Try this :
CSS :
nav {
padding: 0 10% 0 10%; // imho it's a strange way to center your nav. Reduced to show you that you're lacking room.
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
background-color: #93B874;
}
#navleft {
flex: 2; // You may tune this one but keep room for your other items !
}
#navleft img {
width: 144px;
vertical-align: center
}
.navothers {
flex: 1;
border: solid 1px #000;
}
HTML :
<nav>
<ul>
<li id="navleft">
<img src="images/logo.png" alt="logo wikihow">
</li>
<li class="navothers">
<img src="images/contribuye.png" alt="contribuye">
<p>CONTRIBUYE</p>
</li>
<li class="navothers">
<img src="images/explora.png" alt="explora">
<p>EXPLORA</p>
</li>
<li class="navothers">
<img src="images/entrar.png" alt="entrar">
<p>ENTRAR</p>
</li>
<li class="navothers">
<img src="images/mensajes.png" alt="mensajes">
<p>MENSAJES</p>
</li>
</ul>
</nav>
https://jsfiddle.net/me7t2hv3/