Como adicionar barras de rolagem para o meu HTML que desaparecem se o conteúdo é menor do que o limite

Question

Eu estou tentando criar um formulário que tem um widget expansível. O problema é que quando o widget é aberta, a forma se estende fora do limite na caixa de conteúdo, e parece ruim.

Eu tentei usar overflow:scroll mas cria 2 barras de rolagem feias que não desaparecem mesmo que o conent é menor, em seguida, a caixa de conteúdo. Só preciso de uma barra de rolagem vertical.

Visual Studio também alertou que overflow-y não está disponível em CSS.

Answer 1

Mude o seu transbordamento para auto e definir a altura e / ou largura do elemento.

Answer 2

overflow-x e overflow-y fazem parte da proposta CSS3, e trabalhar em todas as versões atuais dos quatro grandes navegadores.

Eu costumo fazer:

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

A razão é que, por vezes, navegadores overflow: auto tratar como overflow: scroll (duas barras de rolagem feias), logo que transborda de conteúdo em uma direção, mas esses navegadores já overflow-x apoio e overflow-y, que recebem prioridade.

Answer 3

Swilliams deu uma boa resposta sobre como tratar o sintoma. Mas, você pode querer pensar sobre a causa raiz também - se a caixa de conteúdo não foram restrito a um tamanho fixo, poderia encolher e / ou expandir para caber qualquer forma tamanho, sem barras de rolagem. páginas da web são flexíveis por design, e as tentativas para "consertar" que a flexibilidade geralmente acabam correndo em problemas deste tipo.