Default value for / resetting the overflow property

HTML & CSS
1

Hello,
In a page Im designing, I need to style the outermost container to overflow:hidden
In the stylesheet it looks like this:

#container{
               /*other styles...*/
               overflow:hidden;
           }

But then the content in one of the div nested inside #container is hidden. Because it inherited the overflow:hidden
But I do not want it to do so. I want the overflow property to be reset for the div as if it never inherited it from #container

So what is the default value for overflow? or is there another way I can not apply overflow:hidden to said nested div?

Thanks in Advance & Kind Regards,
Team 1504

P.S. I wouldn’t want to use the :not css3 pseudo-class because of the lack of support. Meaning, is there another solution besides


#container:not(#overflowDiv){
    overflow:hidden;
}
2

Visible or auto, depending on the source.

3

auto messes it up even more. But I will try visible and let you know!

4

As long as it doesn’t matter if it, er, overflows, then visible is fine. In what way did auto mess it up? That should produce a scrollbar if one is deemed necessary.

5

Yes, but I want it to overflow without a scroll bar if that makes any sense. Well have the nested div overflow and if a scroll-bar is necessary (it would be a vertical one in this case) then it is applied to the body not just the div.

overflow:visible; didn’t work :frowning: even when I did overflow:visible !important;

6

Well, we need more context, then, in that case. You’re running out of overflow property values at this rate!

Visible will force it to overflow without a scrollbar (not something that I could ever imagine wanting), but it could still be covered if you have a z-index issue with adjacent content.

7

Yes, but I want it to overflow without a scroll bar if that makes any sense. Well have the nested div overflow and if a scroll-bar is necessary (it would be a vertical one in this case) then it is applied to the body not just the div.

overflow:visible; didn’t work :frowning: even when I did overflow:visible !important;

8

You have a duplicate post there! As above, can you give more context, or a link?

9

oh whoops. Sorry.

Yeah, I am running out of overflow values.

The content that is overflowing is dynamically generated by PHP so I do not know how much help code would provide as it needs to be parsed :frowning:

Edit: I do not know why this worked. But when I moved the overflow:hidden style to body instead of #container. Everything works fine! :slight_smile: :weee:

The strangest part is that #container is just a holding div. It is essentially the body so I have no idea how or why this worked :lol:

10

OK, no worries. :slight_smile:

11

is it just me or are my posts not showing up? Thats why there are duplicates.

In short, the content that overflows is dynamically generated by PHP so posting the code might just make it more confusing

but then, I edited the post and said that I was messing around and solved the issue by putting the overflow styling to body instead of #container?

And then i asked, idk how that worked because #container was just the first div so it is essentially the body, right?

Of course the moment I posted it again, it shows up!

12

There’s a forum bugs thread running somewhere. It would be worth checking that and mentioning the issue.

13

Hi,

None of what you have said really makes much sense as far as CSS is concerned.:slight_smile:
[URL=“http://reference.sitepoint.com/css/overflow”]
Overflow is not inherrited.

If you apply overlow:hidden to a container then any content that sits inside that container will not be allowed past the boundaries of the container (unless they are positioned elements and the element with overflow:@hidden is not position:relative). You can’t add overflow visible to a child and expect it to have any effect because it is the parent that is hiding the children. There is no inherritance going on, you told the parent to hide any overflow and that’s what it does.

You don’t really want to mess with the overflow property on the body element either as that can soon get very tricky in older browsers and you may end up with scrolls bars on the html and body elements. Just leave the body alone there is no need to set overflow:hidden or auto because it is already set up to work as expected.

I’d need to see your set up to see what you are trying to do and why you think you have to mess with the body element. :slight_smile: