title: Fit text into flexbox container
body: <p>I have a navigation bar with image in the middle. Looks similar to this: </p>
  
  <pre><code>&lt;nav class="navigation"&gt;
     &lt;ul class="navigation-list-1"&gt;
        &lt;li class="navigation-list-item"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class="navigation-list-item"&gt;&lt;a href="#features"&gt;Features&lt;/a&gt;&lt;/li&gt;
        &lt;li class="navigation-list-item"&gt;&lt;a href="#add-info"&gt;Add info&lt;/a&gt;&lt;/li&gt;
        &lt;li class="navigation-list-item"&gt;&lt;img class="logo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6f4af2d2d158"&gt;&lt;/li&gt;
        &lt;li class="navigation-list-item"&gt;&lt;a href="#form"&gt;Form&lt;/a&gt;&lt;/li&gt;
        &lt;li class="navigation-list-item"&gt;&lt;a href="#team"&gt;Team&lt;/a&gt;&lt;/li&gt;
        &lt;li class="navigation-list-item"&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>And style: </p>
  
  <pre><code>&gt; .navigation-list-item {
  list-style: none;
  font-size: 15px;
  font-weight: bold;
  }
  
  .logo {
    position:absolute;
  
  width: 10vw;
  left:calc(50% - (10vw/2) - (10px/2));
  background: cornflowerblue;
  border: 5px solid cornflowerblue;
  }
  
  ul{
    display:flex;
    margin-left:-40px;
  
  }
  li{
    flex:1;
    background:yellow;
    border:1px solid green;
    height:70px;
    line-height:70px;
    text-align:center;
  }
  
  li&gt;a{
    text-decoration:none;
  }
  </code></pre>
  
  <p>Now, if text in navigation item is longer than particular length, the text is spliting into next line and going outside the bar so it doesn't look good. How to make text in container always to be in one line?</p>