Popper.js and flex-end causing body overflow

Question

In my project, I have a list of dropdown buttons which are aligned right using flex-end. I've created a very minimal version of the code that shows the issue:

var popper = new Popper(
  $('#anchor')[0],
  $('#popper')[0],
  {
    modifiers: {
      preventOverflow: {
        enabled: true,
        boundariesElement: 'window'
      }
    }
  }
);

body {
  height: 2000px;
}
.parent {
  display: flex;
  justify-content: flex-end;
}
.anchor {
  width: 40px;
  height: 40px;
  
  background-color: #333;
}
.popper {
  width: 120px;
  height: 80px;
  
  background-color: #c23;
  border: 2px solid #ae3;
}

ul {
  list-style-type: none;
  margin: 0 -6px;
}
li {
  margin: 0 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>

<ul class="parent">
  <li><div class="anchor"></div></li>
  <li><div class="anchor"></div></li>
  <li><div class="anchor"></div></li>
  <li>
    <div class="anchor" id="anchor"></div>
    <div class="popper" id="popper"></div>
  </li>
</ul>

As seen above, the .popper div is overflowing body; causing a scrollbar to appear.

Removing the li makes Popper work as expected but I cannot do this as I'd lose my list. Using flex-start instead of -end also works correctly.

It's worth noting that the .popper and .anchor elements could be any width depending on what's in them.

Are there any workarounds or solutions for this behaviour? Preferably, without changing any markup.

Popper.js and flex-end causing body overflow

0 Answers0