Stop flex overlapping - css

Question

I have the following navigation which I have made responsive by using display:flex:
#header-nav { display: flex; flex-grow: 1; background: #707276; background: rgba(112,114,118,0.75); }
#header-nav .nav-item { display: flex; flex-grow: 1; flex-basis: 0; }
#header-nav .nav-link { display: block; color: #ffffff; display: flex; flex-grow: 1; justify-content: center; align-items: center; white-space: nowrap; }
#header-nav > .nav-item > .nav-link { box-sizing: border-box; text-transform: uppercase; text-decoration: none; padding: 15px 0; position: relative; transition: color 0.5s ease-in-out; font-size: 115.385%; font-family: VegurRegular; }
#header-nav > .nav-item > .nav-link:hover { color: #000000; }
#header-nav > .nav-item > .nav-link:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 5px; opacity: 0; transition: opacity 0.5s ease-in-out; background-color: #36383a; }
#header-nav > .nav-item > .nav-link:hover:after { opacity: 0.8; }
#header-nav .home { flex-grow: 0; flex-basis: auto; padding: 0 50px; }
#header-nav .nav-item.home > .nav-link { display: block; }
#header-nav .nav-item.home > .nav-link:after { display: none; }
<ul id="header-nav">
<li class="nav-item home">
<a href="/" class="nav-link">
<span id="logo-text" class="sprite">Logo</span>
</a>
</li>
<li class="nav-item">
Shop
</li>
<li class="nav-item">
Tiling Ideas
</li>
<li class="nav-item">
Advice
</li>
<li class="nav-item">
Find a Retailer
</li>
</ul>
As you can see, the logo stays the same width, whilst the rest is responsive. But if you use the fullpage link and then make the width of the screen smaller, you will see the links start to overlap each other. Is there any way to stop this from happening using flex?
I know I can find a route with using display table that would achieve the same thing but I would prefer to use display flex.

Answer 1

Try removing the white-space: nowrap; as it is is inherently not responsive.
#header-nav {
display: flex;
flex-grow: 1;
background: #707276;
background: rgba(112, 114, 118, 0.75);
}
#header-nav .nav-item {
display: flex;
flex: 1;
}
#header-nav .nav-link {
color: #ffffff;
display: flex;
flex-grow: 1;
text-align: center;
justify-content: center;
align-items: center;
align-content: center;
}
#header-nav > .nav-item > .nav-link {
box-sizing: border-box;
text-transform: uppercase;
text-decoration: none;
padding: 15px 0;
position: relative;
transition: color 0.5s ease-in-out;
font-size: 115.385%;
font-family: VegurRegular;
}
#header-nav > .nav-item > .nav-link:hover {
color: #000000;
}
#header-nav > .nav-item > .nav-link:after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 5px;
opacity: 0;
transition: opacity 0.5s ease-in-out;
background-color: #36383a;
}
#header-nav > .nav-item > .nav-link:hover:after {
opacity: 0.8;
}
#header-nav .home {
flex-grow: 0;
flex-basis: auto;
padding: 0 50px;
}
#header-nav .nav-item.home > .nav-link {
display: block;
}
#header-nav .nav-item.home > .nav-link:after {
display: none;
}
<ul id="header-nav">
<li class="nav-item home">
<a href="/" class="nav-link">
<span id="logo-text" class="sprite">Logo</span>
</a>
</li>
<li class="nav-item">
Shop
</li>
<li class="nav-item">
Tiling Ideas
</li>
<li class="nav-item">
Advice
</li>
<li class="nav-item">
Find a Retailer
</li>
</ul>
Alternatively, consider media queries to reduce the font size at lower screen sizes.