Come aggiungere barre di scorrimento al mio HTML che scompaiono se il contenuto è inferiore al limite

Question

Sto cercando di creare un modulo con un widget espandibile. Il problema è che quando il widget è aperto, il modulo si estende oltre il limite nella casella del contenuto e sembra male.

Ho provato a usare overflow: scroll ma crea 2 brutte barre di scorrimento che non scompaiono anche se il conent è più piccolo della casella del contenuto. Ho solo bisogno di una barra di scorrimento verticale.

Visual Studio ha inoltre avvisato che overflow-y non è disponibile nei CSS.

Answer 1

Cambia il tuo overflow in auto e definisci l'altezza e / o la larghezza dell'elemento.

Answer 2

overflow-x e overflow-y fanno parte della proposta CSS3 e funzionano in tutte le versioni correnti dei quattro grandi browser.

Di solito lo faccio:

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

Il motivo è che a volte i browser trattano overflow: auto come overflow: scroll (due brutte barre di scorrimento) non appena il contenuto trabocca in una direzione, ma quei browser già supportano overflow-x e overflow-y , che hanno la precedenza.

Answer 3

Swilliams ha dato una buona risposta su come trattare il sintomo. Tuttavia, potresti voler pensare anche alla causa principale: se la casella del contenuto non fosse vincolata a una dimensione fissa, potrebbe ridursi e / o espandersi per adattarsi a qualsiasi formato, senza barre di scorrimento. Le pagine Web sono flessibili in base alla progettazione e tentano di "correggere" tale flessibilità di solito finisce per incorrere in problemi di questo tipo.