title: <ul> element not taking full content width
body: <p>I am making a navigation bar with unordered list. I am using flexbox.</p>
  <p>Here is the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* navbar */
  
  .top-navbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 4%;
  }
  
  .top-nav-list {
    flex: 0 1 auto;
    /* I have to change the grow &amp; basis to get my desired result */
  }
  
  .top-nav-list li {
    display: inline-block;
    padding: 0 2%;
    /* This padding has no effect on the full width of ul element */
  }
  
  .watch-link {
    margin-left: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;nav class="top-navbar"&gt;
      &lt;div class="nav-logo"&gt;Title&lt;/div&gt;
      &lt;ul class="top-nav-list"&gt;
        &lt;!-- This is the problem element --&gt;
        &lt;li&gt;Browse&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Movies&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;TV&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;Search Bar&lt;/li&gt;
        &lt;li&gt;Expand&lt;/li&gt;
      &lt;/ul&gt;
      &lt;a href="#" class="watch-link"&gt;&lt;button class="watch-btn"&gt;Watchlist&lt;/button&gt;&lt;/a&gt;
    &lt;/nav&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>There are 3 flex items in the container. One of which is the unordered list. The <code>ul</code> is not taking its full content width even though there is available space in the flex container. It's breaking into two lines. I can set the <code>flex-grow</code> and <code>flex-basis</code> to take more available space.</p>
  <p><strong>But shouldn't it take the full content width by default?</strong>
  All the list items are inline block, still the last item is breaking into next line. <code>width:fit-content</code> also doesn't work. And the <code>padding</code> has no effect on the width. It just makes more items to go into 2nd line.</p>
  <p><em>I am also using sanitize css to normalize browser default styles.</em></p>