How to Prevent a Bootstrap Dropdown Menu from Expanding its Container when Making it Scrollable?

Scrollable Menu with Bootstrap - Preventing Container Expansion

When implementing a scrollable menu with Bootstrap, it's crucial to avoid the issue of the menu expanding its container. Here's a solution that directly tackles this problem:

In your CSS, add the following styles to the scrollable menu class:

<code class="css">.scrollable-menu {
    height: auto;
    max-height: <desired max-height>;
    overflow-x: hidden;
}</code>

For example:

<code class="css">.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}</code>

In your HTML, apply the scrollable-menu class to the dropdown menu that you want to make scrollable:

<code class="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="#">Action</a></li>
  <li><a href="#">Another action</a></li>
</ul></code>

With these changes, your scrollable menu will have a maximum height of 200px, preventing it from expanding the containing container. Adjust the max-height property as needed to fit your design requirements.

The above is the detailed content of How to Prevent a Bootstrap Dropdown Menu from Expanding its Container when Making it Scrollable?. For more information, please follow other related articles on the PHP Chinese website!