Popper.js和flex-end导致主体溢出

Question

在我的项目中，我有一个下拉按钮列表，这些按钮使用flex-end对齐。我创建了显示问题的代码的最小版本：

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>

如上所示，.popper div溢出body；导致出现滚动条。

删除li可以使Popper正常工作，但是我不能这样做，因为我会丢失列表。使用flex-start代替-end也可以正常工作。

值得注意的是，.popper和.anchor元素的宽度可以取决于它们中的内容。

此行为是否有任何解决方法或解决方案？最好不要更改任何标记。