dropdown-stuck-in-scrolled-overflow

by ronjouch

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<body>
  <div class="alert alert-primary" role="alert">
    <p>This is a typical {left sidebar + right content} layout, made using Bootstrap 4 {container-fluid, row, col}.</p>
    <ul>
      <li>In the left sidebar live a set of filters. It may contain several filters that will consume undetermined vertical space, thus lives in a "overflow-y:scroll" div.</li>
      <li>In the right pane lives the content, filtered by the filters in the left sidebar</li>
    </ul>
    <p>Now, click the "Filter 1" dropdown in the sidebar and notice how it's "stuck" inside the `overflow:scroll` diff. Notice how the standard `select` of Filter 2 doesn't suffer from the problem.</p>
    <p><strong>Problem:</strong> I am happy with the scrolling behavior of the sidebar, but my problem is that the dropdown menu used to modify each filter may be large (large width due to long option names, and large height due to many dropdown options),
      so that menu often won't fit inside the constrained sidebar.</p>
    <p><strong>→ Question:</strong> How can I keep that sidebar scrolling behavior (which I need because there can be many filters), while letting the dropdown items "escape out" of the sidebar?</p>
    <p>Thanks :)</p>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col col-3 scrolled-heighted-box redbox">
        <div class="row list-item">
          <div class="dropdown">
            <button class="btn btn-sm btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Filter 1
           ...

CSS

.list-item {
  height: 100px;
  border: 1px solid grey;
}

.scrolled-heighted-box {
  overflow-y: scroll;
  height: 300px;
}

.redbox {
  border: 2px solid red;
}