Fit-content not working as expected

[Aaron2323]

I’m fairly new to web development and I want to make sure that my nav bar can expand to fit all of it’s contents inside. But when I do

height: fit-content

The height remains at 0 pixels and I don’t know why. There is content inside of it so by my understanding of it, the nav bar should expand. Here’s my html:

<nav class="navbar">
        <ul class="navigatonul">
          <a class="link" href="pages/aboutme.html">About Me</a
          ><a class="link" href="index.html">Portfolio</a
          ><a class="link" href="pages/contact.html">Other</a>
        </ul>
        <a href="#" class="toggle-button">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </a>
      </nav>

Here’s the css to everything inside of the nav:

header nav ul {
  background-color: #333333;
  width: 100%;
  height: fit-content;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.navigatonul a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  text-decoration: none;
  height: 70px;
  margin-left: var(--navUlMargin);
  margin-right: var(--navUlMargin);
}

And the css to the nav itself:

.navbar {
  background-color: #333333;
  height: fit-content;
}

[ronpat]

fit-content requires a value:

height - CSS: Cascading Style Sheets | MDN

fit-content(<length-percentage> )

Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, <length-percentage>))

[PaulOB]

@ronpat

fit-content requires a value:

Only for the function version (). You can use it on its own (without brackets) and its the same as:

  width: auto;
  min-width: min-content;
  max-width: max-content;

The fit content function with brackets is similar to clamp and requires a definition.

More info here:

fit-content and fit-content() | CSS-Tricks

[PaulOB]

@Aaron2323

There is content inside of it so by my understanding of it, the nav bar should expand.

I tried copying and pasting your code and this is what I get.

I coloured the anchors red so you can see they are full height but they would be 70px anyway because you gave them a height in pixels so the fit-content would be superfluous anyway.

I can’t really see what you were expecting and I don’t see that fit content is any use for you here as its more usable when referring to width.

An element will automatically grow with its children unless they are removed from the flow in some way (see my last comment below).

You can’t use that html anyway because a ul can only contain list elements (li) as direct children. You would need to wrap the anchors in a list element (or not use a ul as a wrapper but a nav element again).

  <ul class="navigatonul">
    <li><a class="link link2" href="pages/aboutme.html">About Me</a></li>
    <li><a class="link" href="index.html">Portfolio</a></li>
    <li><a class="link" href="pages/contact.html">Other</a></li>
  </ul>

Without knowing the effect you want to achieve and where you are seeing a problem it will be hard to give more specific advice.

You have made the ul position:fixed so the ul and anchors will be removed from the flow and your header element will be zero pixels high unless it has in-flow content. Perhaps that’s what you meant?