Scrollable Menu with Bootstrap - Menu expanding its container when it should not

Question

I tried this method (their fiddle) to enable scrollable menu with Bootstrap, but with that approach, the scrollable menu expands its container -- fiddle -- the non-scrollabl

Answer 1

I think you can simplify this by just adding the necessary CSS properties to your special scrollable menu class..

CSS:

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

HTML

       

          
Action
          
Another action
          
Something else here
          
Action
            ..
          
Action
          
Another action
       

Working example: https://www.bootply.com/86116

Bootstrap 4

Another example for Bootstrap 4 using flexbox