Как добавить полосы прокрутки в мой HTML, которые исчезают, если содержание меньше, чем предел

Question

Я пытаюсь создать форму с расширяемым виджетом. Проблема в том, что когда виджет открыт, форма выходит за пределы поля для содержимого и выглядит плохо.

Я попытался использовать overflow: scroll , но он создает 2 уродливые полосы прокрутки, которые не исчезают, даже если содержимое меньше, чем поле содержимого. Мне нужна только одна вертикальная полоса прокрутки.

Visual Studio также предупредила, что переполнение-y недоступно в CSS.

Answer 1

Измените переполнение на auto и определите высоту и / или ширину элемента.

Answer 2

overflow-x и overflow-y являются частью предложения CSS3 и работают во всех текущих версиях больших четырех браузеров.

Я обычно делаю:

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

Причина в том, что иногда браузеры воспринимают overflow: auto как overflow: scroll (две некрасивые полосы прокрутки), как только содержимое переполняется в одном направлении, но эти браузеры уже поддерживают overflow-x и overflow-y , которые имеют приоритет.

Answer 3

Свилиамс дал хороший ответ о том, как лечить этот симптом. Но, возможно, вы захотите подумать и об основной причине - если поле содержимого не ограничено фиксированным размером, оно может уменьшаться и / или расширяться, чтобы соответствовать форме любого размера, без полос прокрутки. Веб-страницы являются гибкими по своему дизайну и пытаются "исправить" эта гибкость обычно в конечном итоге сталкивается с проблемами такого рода.