Hacer un div desplazable verticalmente usando CSS

Esta

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

da un divque el usuario puede desplazarse tanto horizontal como verticalmente. ¿Cómo lo cambio para que el div solo se pueda desplazar verticalmente?

Lo tiene cubierto aparte de usar la propiedad incorrecta. La barra de desplazamiento puede ser activado con cualquier propiedad overflow, overflow-xo overflow-yy cada uno se puede ajustar a cualquiera de visible, hidden, scroll, auto, o inherit. Actualmente estás viendo estos dos:

• auto- Este valor tendrá en cuenta el ancho y la altura del cuadro. Si se definen, no permitirá que el cuadro se expanda más allá de esos límites. En cambio (si el contenido excede esos límites), creará una barra de desplazamiento para cualquier límite (o ambos) que exceda su longitud.

• scroll- Estos valores fuerzas de una barra de desplazamiento, no importa qué, incluso si el contenido no exceda el conjunto de contornos. Si no es necesario desplazar el contenido, la barra aparecerá como "deshabilitada" o no interactiva.

Si siempre desea que aparezca la barra de desplazamiento vertical:

Debe utilizar overflow-y: scroll. Esto obliga a que aparezca una barra de desplazamiento para el eje vertical si es necesario o no. Si realmente no puede desplazarse por el contexto, aparecerá como una barra de desplazamiento "deshabilitada".

Si solo desea que aparezca una barra de desplazamiento si puede desplazar el cuadro:

Solo úsalo overflow: auto. Dado que su contenido de manera predeterminada solo se divide en la siguiente línea cuando no puede caber en la línea actual, no se creará una barra de desplazamiento horizontal (a menos que esté en un elemento que tenga deshabilitado el ajuste de palabras). Para la barra vertical, permitirá que el contenido se expanda hasta la altura que haya especificado. Si excede esa altura, mostrará una barra de desplazamiento vertical para ver el resto del contenido, pero no mostrará una barra de desplazamiento si no excede la altura.

Intenta así.

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

Para el 100% de uso de la altura de la ventana:

overflow: auto;
max-height: 100vh;

Uso overflow-y: auto;en el div.

Además, también debe establecer el ancho.

Puedes usar este código en su lugar.

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

overflow-x : la propiedad overflow-x especifica qué hacer con los bordes izquierdo / derecho del contenido, si desborda el área de contenido del elemento.
overflow-y : la propiedad overflow-y especifica qué hacer con los bordes superior / inferior del contenido, si desborda el área de contenido del elemento.

Valores
visibles : valor predeterminado. El contenido no se recorta y se puede representar fuera del cuadro de contenido.
oculto : el contenido se recorta y no se proporciona ningún mecanismo de desplazamiento.
desplazamiento : el contenido se recorta y se proporciona un mecanismo de desplazamiento.
auto : debe provocar un mecanismo de desplazamiento para los cuadros que se desbordan.
initial : establece esta propiedad en su valor predeterminado.
heredar Hereda esta propiedad de su elemento padre.

Puede usar overflow-y: scrollpara desplazamiento 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>

El problema con todas estas respuestas para mí fue que no respondían. Tenía que tener una altura fija para un div padre que no quería. Tampoco quería pasar mucho tiempo cenando con consultas de los medios. Si está utilizando angular, puede usar el conjunto de pestañas bootstraps y hará todo el trabajo duro por usted. Podrá desplazarse por el contenido interno y responderá. Cuando configure la pestaña, hágalo así: $scope.tab = { title: '', url: '', theclass: '', ative: true };... el punto es que no desea un icono de título o imagen. luego oculta el contorno de la pestaña en cs así:

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

y también esto .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} y finalmente eliminar la pestaña invisible en la que aún puedes hacer clic si no implementas esto:.nav > li > a {padding:0px;margin:0px;}