How to Create a Scrollable Menu with Bootstrap Without Expanding Its Container?

Scrollable Menu with Bootstrap - Menu Extending Container

Issue

Using the provided method to create a scrollable menu with Bootstrap results in the menu expanding its container when it seharusnya not. How can this be resolved?

Solution for Bootstrap 5

For Bootstrap 5, apply the following CSS:

.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}

Solution for Bootstrap 4

For Bootstrap 4, apply the same CSS as above.

Alternative Solution for Bootstrap 3

Alternatively, for Bootstrap 3, add the following CSS and HTML:

CSS

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

HTML

<ul class="dropdown-menu scrollable-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <!-- ... -->
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
</ul>

The above is the detailed content of How to Create a Scrollable Menu with Bootstrap Without Expanding Its Container?. For more information, please follow other related articles on the PHP Chinese website!