当不适合视口的情况下，如何使Popper显示滚动条？

问题描述

我必须处理包含长列表的弹出窗口。如果列表过长，则弹出器会溢出主体。我想让弹出窗口显示滚动条。

示例：

<body>
  <div class="h-100 d-flex">
    <div id="container" class="mx-auto my-auto bg-grn">
      OOF
    </div>
  </div>
  <div id="tooltip" class="bg-blu overflow-auto" style="color: white">
    <!-- Ideally this should overflow -->
    Long content
  </div>
  <!-- But instead the whole body overflows -->
</body>
<script>
const tooltip = document.getElementById('tooltip')
tooltip.innerText += 'Long content'.repeat(450)

const popper = Popper.createPopper(document.getElementById("container"),tooltip,{
placement: 'right-start'
})
</script>

在JSFiddle上查看。在jsfiddle上，控制台阻止了x滚动条，但它在那里。

解决方法

您需要设置工具提示的width和height才能看到滚动条。这是一个示例：

#tooltip {
  height: 150px;
  max-width: 40vw;
}

更新了JSFiddle。

javascript popper.js