Popper overflows body

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
}

#tooltip {
  background-color: tomato !important;
  height: 150px;
  max-width: 40vw;
}

JavaScript

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

const popper = Popper.createPopper(document.getElementById("container"), tooltip, {
	placement: 'right-start',
  modifiers: [
  	{
    	name: 'preventOverflow',
    	options: {
        //mainAxis: false,
        altAxis: false,
      }
    }
  ]
})