Bootstrap Dropdown

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<div>
  To see the problem, comment out stragegy: 'fixed' in the javascript.
</div>
<div class="container">
  <div class="overflow-auto" style="border: solid 1px red; padding-bottom: 60px;">
    <div class="dropdown">
      <button id="testerson" class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown">Example
        <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li class="dropdown-header"><b>Example</b></li>
        <li><a href="example1.html">Example 1</a></li>
        <li><a href="example2.html">Example 2</a></li>
        <li><a href="example3.html">Example 3</a></li>
        <li><a href="example4.html">Example 4</a></li>
        <li><a href="example5.html">Example 5</a></li>
      </ul>
    </div>
  </div>
</div>
<div>
  <div style="padding-bottom: 100px;">
    Hi
  </div>
  <div style="padding-bottom: 100px;">
    Hi
  </div>
  <div style="padding-bottom: 100px;">
    Hi
  </div>
  <div style="padding-bottom: 100px;">
    Hi
  </div>
  <div style="padding-bottom: 100px;">
    Hi
  </div>
  <div style="padding-bottom: 100px;">
    Hi
  </div>
  <div style="padding-bottom: 100px;">
    Hi
  </div>
  <div style="padding-bottom: 100px;">
    Hi
  </div>
  <div style="padding-bottom: 100px;">
    Hi
  </div>
</div>

JavaScript

var dropdown = new bootstrap.Dropdown(document.getElementById('testerson'), {
  popperConfig: function (defaultBsPopperConfig) {
    const newPopperConfig = {
    	...defaultBsPopperConfig,
      strategy: 'fixed',
    };
    // use defaultBsPopperConfig if needed...
    return newPopperConfig;
  }
})