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

Question

Hello

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

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.

Answer 3

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.