CSS overflow issue

Question

I have a div which has the css overflow property set to auto. But the overflow property doesn't seem to work and instead of showing a scrollbar within the div, the content of div flows outside div.

What am I missing here?

<div id="divPrvChatBox">
</div>

#divPrvChatBox
{
    width:330px;
    height:200px;
    background-color:Yellow;
    overflow:auto;        
}

I cannot reproduce your results. For example, see here: jsfiddle.net/8SNKz The content does not flow outside the div for me. What OS/browser/version are you using, and can you paste a reproducible test case and screenshot? — Phrogz
– Phrogz, Commented Sep 15, 2011 at 16:44
I am opening the window like this..window.open("ChatWindow.aspx?username=" + toUsername,'_blank', "scrollbars=1,width=340,height=200"); — sly_Chandan
– sly_Chandan, Commented Sep 15, 2011 at 17:00
OK it worked when I did an inline styling with overflow:auto...but not with ID css attribute — sly_Chandan
– sly_Chandan, Commented Sep 15, 2011 at 17:03
It should work via CSS as well. If you can provide an exact example showing your problem, we can help fix it properly. How you are opening the window is irrelevant. — Phrogz
– Phrogz, Commented Sep 15, 2011 at 19:46

rlb.usa · Accepted Answer · 2011-09-15 16:41:48Z

2

overflow:scroll;

This is what you need to explicitly tell the browser to use scroll-bars. When you use auto you are telling the browser that it can decide for itself, often giving some WTF results.

answered Sep 15, 2011 at 16:41

rlb.usa

15.1k17 gold badges86 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nathan Over a year ago

Yes, and auto is the default setting, so that's just the same as not setting it at all.

Phrogz Over a year ago

@Nathan auto is not the default setting. The default is visible.

Phrogz Over a year ago

@rlb.usa I don't know what you mean by 'wtf' results, but overflow:scroll will force scrollbars to always appear, while overflow:auto will cause them to only appear when needed. What the OP is using is usually what is desired, and appears to be what is desired in this case, and also works.

Kyle · Accepted Answer · 2011-09-15 16:44:13Z

1

Set overflow to scroll:

#divPrvChatBox
{
    width:330px;
    height:200px;
    background-color:Yellow;
    overflow: scroll;        
}

Example here.

answered Sep 15, 2011 at 16:44

Kyle

67.5k28 gold badges148 silver badges153 bronze badges

1 Comment

Phrogz Over a year ago

Downvoted because this forces scrollbars to always appear, and would not do anything additional to solve what the OP reports as a problem (content overflowing the container) beyond what auto already does.

Phrogz · Accepted Answer · 2011-09-15 16:55:00Z

I believe that (for whatever reason) your overflow CSS style is not being applied. Perhaps you have a syntax error in your CSS. Perhaps your setting is being overridden. As noted in my comment above and shown in this simple test case using overflow:auto does prevent content from drawing outside the borders of the container, and also causes scrollbars to appear as needed.

Use the Developer Tools for your browser (F12 for IE, right-click and Inspect Element for Chrome or Safari, install Firebug for Firefox) to inspect the actual styles applied to the element in question. You will either see that your rule is not being applied, of the property is not part of your rule, or the rule is being overridden by a more specific selector.

Collectives™ on Stack Overflow

CSS overflow issue

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related