title: Stop flex overlapping
body: <p>I have the following navigation which I have made responsive by using <code>display:flex</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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 &gt; .nav-item &gt; .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 &gt; .nav-item &gt; .nav-link:hover { color: #000000; }
  #header-nav &gt; .nav-item &gt; .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 &gt; .nav-item &gt; .nav-link:hover:after { opacity: 0.8; }
  
  
  #header-nav .home { flex-grow: 0; flex-basis: auto; padding: 0 50px; }
  #header-nav .nav-item.home &gt; .nav-link { display: block; }
  #header-nav .nav-item.home &gt; .nav-link:after { display: none; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="header-nav"&gt;
      &lt;li class="nav-item home"&gt;
          &lt;a href="/" class="nav-link"&gt;
              &lt;span id="logo-text" class="sprite"&gt;Logo&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
          &lt;a href="#shop" class="nav-link"&gt;Shop&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
          &lt;a href="#tiling" class="nav-link"&gt;Tiling Ideas&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
          &lt;a href="#advice" class="nav-link"&gt;Advice&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
          &lt;a href="#retailers" class="nav-link"&gt;Find a Retailer&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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 <code>flex</code>?</p>
  
  <p>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.</p>