Working of overflow in CSS is not as expected

Question

Here is the code

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden; /*The problem is here*/
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: inline-block;
  color: blue;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: red;
}

<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

In the ul style the overflow hidden is being used. Now when overflow hidden is used the background color of the navigation bar turns to black like

But when I delete the overflow:hidden the background color disappears like

Now basically im just confused because overflow: hidden just hides the overflowing stuff in a container so why here its making a background color appear?

It seems that I failed to express my problem. I dont want to know the right solution to this. I just want to know why overflow:hidden is behaving like this . Because overflow:hidden hides the overflowing stuff from the container. — Muhammad Ahmed, Apr 14 '20 at 08:05
overflow:hidden not only hides the overflowing. It also adjust itself. If u doesn't give width to element then it makes its width as paren's width.it will adjust itself to parent. In your code if u look at your body and html doesn't have width so it adjust it to browser. display:flex also adjust itself like that so u can use display flex for that — mr. pc_coder, Apr 14 '20 at 08:14
@Çağrı what you mean by *it also adjust itself*? and *body html doesn't have a width*? they actually have a width and overflow here is creating a BFC (block formatting context) making the floating element inside it. It's not about *overflow* that you hide to obtain a scroll — Temani Afif, Apr 14 '20 at 08:26
@MuhammadAhmed read this from the duplicate: https://stackoverflow.com/a/9932508/8620333 and you will understand the purpose of overflow here. The below answer aren't very accurate — Temani Afif, Apr 14 '20 at 08:29

score 2 · Answer 1 · answered Apr 14 '20 at 08:22

I dont want to know the right solution to this. I just want to know why overflow:hidden is behaving like this.

Because your list items are floated, they do not by default influence the height of their ul parent. The effective height of the list element itself stays 0 here, so you don’t actually see the background color anywhere.

overflow set to anything but the default value auto, acts as a clear fix. That means the li will now influence the height of the ul, and now that the ul actually has a height, you also see its background color applied over that height.

More information on what a “clear fix” is, if you’re not familiar with the term, and what other ways there are to achieve it, can be found f.e. here,

SO question: What is a clearfix?

https://css-tricks.com/the-how-and-why-of-clearing-floats/, https://css-tricks.com/snippets/css/clear-fix/

Aymen TAGHLISSIA · Accepted Answer · 2020-04-14T08:12:46.983

Anything inside that might be floating does not get clipped unless you have the overflow set to either hidden, scroll or auto. The real perpose of the method is that without having given the element a set height and width, when you set overflow to hidden it takes on the height and width of the inner elements : https://codepen.io/Aypro18/pen/ExVVgYa?editors=1000

   <!DOCTYPE html>
   <html>
    <head>
    <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: auto; //The problem is here and the olution itself
      background-color: #333;
    }

    li {
      float: left;
    }

    li a {
      display: inline-block;
      color: blue;
      text-align: center;
      padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: red;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Thanks but I tried your code and the behavior is still same as before. The background color appears with overflow and disappears without overflow.I just want to know how overflow is doing this since overflow:hidden is used for something else; — Muhammad Ahmed, Apr 14 '20 at 07:57
i updated the answer , with explaining what the overflow is for — Aymen TAGHLISSIA, Apr 14 '20 at 08:13

Thet Aung · Answer 3 · 2020-04-14T08:42:06.363

0

Add display: flex; to ui styles. Now, you can remove overflow:hidden. It is happening because parent element is not acting as container to the children (because of their float property). So, it is not inheriting their height and adjust to it. So, display flex solves that.

edited Apr 14 '20 at 08:42

answered Apr 14 '20 at 08:23

Thet Aung

485
5
11

Working of overflow in CSS is not as expected

3 Answers3