Tornando uma div rolável verticalmente usando CSS

este

<div id="" style="overflow:scroll; height:400px;">

dá a divisso que o usuário pode rolar na horizontal e na vertical. Como faço para alterá-lo para que a div seja rolada apenas verticalmente?

Você o tem coberto, além de usar a propriedade errada. A barra de rolagem pode ser acionado com qualquer propriedade overflow, overflow-xou overflow-ye cada um pode ser configurado para qualquer um visible, hidden, scroll, auto, ou inherit. Você está vendo estes dois:

• auto- Este valor examinará a largura e a altura da caixa. Se eles estiverem definidos, não permitirá que a caixa se expanda além desses limites. Em vez disso (se o conteúdo exceder esses limites), ele criará uma barra de rolagem para os limites (ou ambos) que excederem seu comprimento.

• scroll- Esse valor força uma barra de rolagem, não importa o que aconteça, mesmo que o conteúdo não exceda o conjunto de limites. Se o conteúdo não precisar ser rolado, a barra aparecerá como "desativada" ou não interativa.

Se você sempre deseja que a barra de rolagem vertical apareça:

Você deveria usar overflow-y: scroll. Isso força uma barra de rolagem a aparecer no eixo vertical, seja ou não necessário. Se você não puder realmente rolar o contexto, ele aparecerá como uma barra de rolagem "desativada".

Se você deseja que apenas uma barra de rolagem apareça, é possível rolar a caixa:

Apenas use overflow: auto. Como o seu conteúdo, por padrão, apenas passa para a próxima linha quando não pode caber na linha atual, uma barra de rolagem horizontal não será criada (a menos que esteja em um elemento com a quebra de linha desativada). Para a barra vertical, permitirá que o conteúdo se expanda até a altura especificada. Se exceder essa altura, mostrará uma barra de rolagem vertical para visualizar o restante do conteúdo, mas não mostrará uma barra de rolagem se não exceder a altura.

Tente assim.

<div style="overflow-y: scroll; height:400px;">

Para 100% de altura da janela de exibição, use:

overflow: auto;
max-height: 100vh;

Use overflow-y: auto;na div.

Além disso, você deve definir a largura também.

Você pode usar esse código.

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">

overflow-x : a propriedade overflow-x especifica o que fazer com as bordas esquerda / direita do conteúdo - se ele exceder a área de conteúdo do elemento.
overflow-y : a propriedade overflow-y especifica o que fazer com as bordas superior / inferior do conteúdo - se ele exceder a área de conteúdo do elemento.

Valores
visíveis : valor padrão. O conteúdo não é recortado e pode ser renderizado fora da caixa de conteúdo.
oculto : o conteúdo é cortado - e nenhum mecanismo de rolagem é fornecido.
rolagem : o conteúdo é cortado e um mecanismo de rolagem é fornecido.
auto : deve causar um mecanismo de rolagem para caixas transbordando.
initial : define esta propriedade como seu valor padrão.
herda Herda essa propriedade de seu elemento pai.

Você pode usar overflow-y: scrollpara rolagem vertical.

<div  style="overflow-y:scroll; height:400px; background:gray">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
 </div>

O problema com todas essas respostas para mim foi que elas não responderam. Eu tinha que ter uma altura fixa para uma div pai que eu não queria. Eu também não queria gastar muito tempo conversando com consultas de mídia. Se você estiver usando angular, poderá usar o conjunto de guias bootstraps e ele fará todo o trabalho duro por você. Você poderá rolar o conteúdo interno e ele será responsivo. Ao configurar a guia, faça o seguinte: $scope.tab = { title: '', url: '', theclass: '', ative: true };... o ponto é que você não deseja um título ou ícone de imagem. em seguida, oculte o contorno da guia em cs assim:

.nav-tabs {
   border-bottom:none; 
} 

e também this .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} e finalmente para remover a guia invisível na qual você ainda pode clicar se não implementar isso:.nav > li > a {padding:0px;margin:0px;}