Popper overflows body

by raldone01

HTML

<script src="https://unpkg.com/@popperjs/core@2"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<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>

CSS

html,body {
    height: 100%;
    min-height: 100%;
}

.bg-pnk {
  background: pink
}

.bg-grn {
  background: green
}

.bg-blu {
  background: blue
}

.bg-yel {
  background: yellow
}

JavaScript

const tooltip = document.getElementById('tooltip')
tooltip.innerText += 'Long content'.repeat(450)

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