1

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;        
}
4
  • 1
    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? 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"); 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 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. Commented Sep 15, 2011 at 19:46

3 Answers 3

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.

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

3 Comments

Yes, and auto is the default setting, so that's just the same as not setting it at all.
@Nathan auto is not the default setting. The default is visible.
@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.
1

Set overflow to scroll:

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

Example here.

1 Comment

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.
1

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.