内部定位在Popper-js中无法正常工作？

Question

我使用Popper.js做一些下拉菜单。到目前为止，我发现该库非常易于使用。我设法做了一些很酷的东西，甚至是可拖动的按钮，当我接近视口的边界时，popper元素会自动在按钮周围移动。 所有这一切都非常有效，只要popper元素位于 按钮旁边。

现在我正在尝试使用popper文档中描述的内部修饰符。目标是让popper元素出现在按钮上方。 您可以查看此页面，了解我正在寻找的结果类型： https://material.angularjs.org/latest/demo/select

问题是，当我靠近视口的边界时，我不能让Popper.js自动纠正popper的位置。 如果我将展示位置设置为＆＃39; bottom＆＃39;，则下拉菜单会在按钮底部对齐，并在顶部重叠。但是，如果我靠近屏幕顶部，我希望展示位置自动反转。 有没有可能这样做？这就是我启动popper的方式。

var popper = new Popper(ref3, el3, {
  modifiers: {
    flip: {
      enabled: true
    },
    preventOverflow: {
      enabled: true,
      boundariesElement: 'scrollParent'
    },
    inner: {
      enabled: true
    }
  },
  placement: 'bottom',
});

我做了一个小的CodePen：https://codepen.io/anon/pen/GyrjXG 按钮1＆amp; 2按预期工作。 按钮3启用了内部修改器，但我希望它具有与其他按钮类似的行为。

非常感谢你的帮助！