Menú desplazable con Bootstrap – Menú que expande su contenedor cuando no debería

Probé este método ( su violín ) para habilitar el menú desplazable con Bootstrap, pero con ese enfoque, el menú desplegable expande su contenedor – violín – el menú no desplazable, correctamente, no hace esto.

¿Cómo puedo arreglar esto? ¡También se agradecen las sugerencias sobre otros enfoques compatibles con Bootstrap!


Como referencia, aquí está el HTML del violín del primer método:

 

Y el CSS:

 /* So we wont impact the original bootstrap menu or it's pseudo call-out arrow the menu is wrapped in a sub dropdown-menu with a chained scroll-menu */ ul.scroll-menu { position:relative; display:inherit!important; overflow-x:auto; -webkit-overflow-scrolling:touch; -moz-overflow-scrolling:touch; -ms-overflow-scrolling:touch; -o-overflow-scrolling:touch; overflow-scrolling:touch; top:0!important; left:0!important; width:100%; height:auto; max-height:500px; margin:0; border-left:none; border-right:none; -webkit-border-radius:0!important; -moz-border-radius:0!important; -ms-border-radius:0!important; -o-border-radius:0!important; border-radius:0!important; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow:none } 

Creo que puede simplificar esto simplemente agregando las propiedades de CSS necesarias a su clase especial de menú desplazable.

CSS:

 .scrollable-menu { height: auto; max-height: 200px; overflow-x: hidden; } 

HTML

   

Ejemplo de trabajo: https://www.bootply.com/86116

Puede usar la clase de CSS incorporada pre-desplazable en bootstrap 3 dentro del elemento span del menú desplegable y funciona inmediatamente sin implementar css personalizados.

   

Para CSS, encontré que la altura máxima de 180 es mejor para los teléfonos móviles paisaje 320 cuando se muestra el navegador Chrome.

 .scrollable-menu { height: auto; max-height: 180px; overflow-x: hidden; } 

Además, para agregar barras de desplazamiento visibles, este CSS debería hacer el truco:

 .scrollable-menu::-webkit-scrollbar { -webkit-appearance: none; width: 4px; } .scrollable-menu::-webkit-scrollbar-thumb { border-radius: 3px; background-color: lightgray; -webkit-box-shadow: 0 0 1px rgba(255,255,255,.75); } 

Los cambios se reflejan aquí: https://www.bootply.com/BhkCKFEELL

Espero que este código funcione bien, intenta esto.

agregue el archivo css.

 .scrollbar { height: auto; max-height: 180px; overflow-x: hidden; } 

Código HTML:

  

Haga todo en la línea de la etiqueta UL

  

Solo soluciono este problema en mi proyecto-

Código CSS

 .scroll-menu{ min-width: 220px; max-height: 90vh; overflow: auto; } 

Código HTML