Jak ukryć <dialog> z ustawionym {display:flex}?

Cześć.

Mam jakiś dziwny problem z <dialog> . Jeżeli ma nadaną właściwość flex to przycisk który ma za zadanie go ukryć nie działa. Ukrywa tylko tło, dialog zostanie. Jeżeli usuną własciwość Flex z dialog to wtedy wszystko działa prawidłowo. przycisk ukrywa dialog. Co może być przyczyną?

https://codepen.io/dawid888/pen/KKjZdoM


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Manrope", sans-serif;
}


dialog{
  display: flex; 
  position: absolute; 
  height: 100px;
  width: 800px; 
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  /order: none; 
  
} 


dialog::backdrop {
  background-color: rgba(13, 14, 27, 0.7)
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test</title>

  </head>

  <body>
    <button onclick="dialogShow()">dialog open</button>
    
    <dialog id="sampleDialog">
	    <div class="dialog-content">Line 1</div>
		  <div class="dialog-content">Line 2</div>
      <button onclick="dialogClose()">dialog close</button>
    </dialog>

    <script>
      function dialogShow() {
        const dialog = document.getElementById("sampleDialog");
        dialog.showModal();
      }

      function dialogClose() {
        const dialog = document.getElementById("sampleDialog");
        dialog.close();
      }
    </script>
  </body>
</html>

W dev toolsach możesz sprawdzić, że pokazywanie i ukrywanie dialogu odbywa się przez display. Możliwe, że musisz coś tam zaznaczyć, żeby były widoczne style z user agent stylesheet.

Osobiście dodałbym div z display: flex jako child tagu dialog. Ale jeżeli chcesz zostać przy swoim rozwiązaniu to możesz użyć np.: