<h1>Using popover to break out of overflow hidden</h1>

<section>
  <h3>Basic overflow hidden element</h3>
  <button id="the-btn">
    Open dialog
  
    <div class="popover" popover id="popover">Hello world</div>
  </button>
</section>

section {
  background: red;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  padding: 10px;
}

button {
  anchor-name: --owner;
}

.popover {
  background-color: green;
  position-anchor: --owner;
  position: absolute;
  left: anchor(left);
  top: anchor(bottom);
  margin: 0;
}

const popover = document.getElementById('popover');
const btn = document.getElementById('the-btn')

btn.addEventListener('click', function () {
  popover.showPopover()
});