Как добавить полосы прокрутки в мой 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

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