How to add scrollbars to my HTML that disappear if the content is smaller than the limit

Question

I'm trying to create a form that has an expandable widget. The problem is that when the widget is open, The form extends outside the limit in the content box, and it looks bad.

I tried using overflow:scroll but it creates 2 ugly scrollbars that do not disappear even if the conent is smaller then the content box. I only need one vertical scrollbar.

Visual Studio also alerted that overflow-y is not available in CSS.

Answer 1

Change your overflow to auto and define the height and/or width of the element.

Answer 2

overflow-x and overflow-y are part of the CSS3 proposal, and work in all of the current versions of the big four browsers.

I usually do:

overflow: auto;
overflow-x: auto;
overflow-y: auto;

The reason is that sometimes browsers treat overflow: auto as overflow: scroll (two ugly scrollbars) as soon as content overflows in one direction, but those browsers already support overflow-x and overflow-y, which get precedence.

Answer 3

Swilliams gave a good answer about how to treat the symptom. But, you might want to think about the root cause too - if the content box were not constrained to a fixed size, it could shrink and/or expand to fit any size form, without scroll bars. Web pages are flexible by design, and attempts to "fix" that flexibility usually end up running into problems of this sort.