CODEWITHSUNDEEP
htmlcssflexboxwidthhtml-lists
Md. Arefin Rabbi Emon
Md. Arefin Rabbi Emon

Reputation: 85

<ul> element not taking full content width

I am making a navigation bar with unordered list. I am using flexbox.

Here is the 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 & 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;
}
<header>
  <nav class="top-navbar">
    <div class="nav-logo">Title</div>
    <ul class="top-nav-list">
      <!-- This is the problem element -->
      <li>Browse</li>
      <li><a href="">Movies</a></li>
      <li><a href="">TV</a></li>
      <li>Search Bar</li>
      <li>Expand</li>
    </ul>
    <a href="#" class="watch-link"><button class="watch-btn">Watchlist</button></a>
  </nav>
</header>

There are 3 flex items in the container. One of which is the unordered list. The ul 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 flex-grow and flex-basis to take more available space.

But shouldn't it take the full content width by default? All the list items are inline block, still the last item is breaking into next line. width:fit-content also doesn't work. And the padding has no effect on the width. It just makes more items to go into 2nd line.

I am also using sanitize css to normalize browser default styles.

Upvotes: 0

Views: 1500

Answers (2)

Md. Arefin Rabbi Emon
Md. Arefin Rabbi Emon

Reputation: 85

I found the explanation for breaking lines. It was this line:

padding: 0 2%;  /*This padding has no effect on the full width of ul element */

I was making the child's (list-item) padding equal to a percentage of the parent's (ul) width. But the width is not defined yet. A parent's width is defined by the user or by its content. So, I was using a variable that doesn't exist yet. This is also why the padding had no effect on the final width.

So, as the browser can't set the padding without knowing the parent's width, it first calculates total width of ul based on all the children's content width without the padding. Then, after setting the width of ul without the padding, it gives 2% padding to each children. But, as there is no extra space/width available in the ul, the line wraps/breaks, or overflows if we use white-space: nowrap

If we use any other padding units like px, em or vw , it works because the children's width doesn't depend on parent's width which is not defined by the user.

Upvotes: 1

StepUp
StepUp

Reputation: 38094

It looks like li items breaks within ul element. So use white-space:nowrap; in your CSS:

.top-nav-list {
    flex: 0 1 auto;
    white-space:nowrap;
}

An example:

/* navbar */

.top-navbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 4%;
}

.top-nav-list {
  flex: 0 1 auto;
  white-space:nowrap;
  /* I have to change the grow & basis to get my desired result */
}

.top-nav-list li {
  display: inline-block;
  padding: 0 2%;  
}

.watch-link {
  margin-left: auto;
}
<header>
  <nav class="top-navbar">
    <div class="nav-logo">Title</div>
    <ul class="top-nav-list">
      <!-- This is the problem element -->
      <li>Browse</li>
      <li><a href="">Movies</a></li>
      <li><a href="">TV</a></li>
      <li>Search Bar</li>
      <li>Expand</li>
    </ul>
    <a href="#" class="watch-link"><button class="watch-btn">Watchlist</button></a>
  </nav>
</header>

Upvotes: 0

Related Questions