如何将 CSS 模态 iframe 或 pdf 嵌入到完全动态响应高度？

如何解决如何将 CSS 模态 iframe 或 pdf 嵌入到完全动态响应高度？

我将 Tailwind CSS 用于模态（类似于 Bootstrap 的）。

我不明白的是如何将对象（iframe、pdf）嵌入到模态体的全高（基于屏幕高度是动态的）。

示例：https://play.tailwindcss.com/dxKwbYilfD

我认为这不仅是 Tailwind 的问题，也是 CSS 和我之间的问题！ :)

如您所见，我在这里使用了 height="100%"，但我需要类似 min-height: 100% 之类的东西，但显然在这里不起作用。

有效的是 height:-webkit-fill-available，但由于 -webkit 部分而无法在每个浏览器上使用。

这里怎么办？我搜索了很多没有结果。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="fixed inset-0 flex flex-col items-center justify-start p-3 md:p-16 z-20">
  <div class="absolute inset-0 bg-black opacity-50"></div>

  <div class="flex flex-col bg-white rounded-lg overflow-hidden shadow-xl md:max-w-4xl md:w-full max-h-screen z-40">
    <div class="flex justify-between border-b">
      <div class="px-3 py-2 md:px-4 md:py-3 text-lg font-semibold">Header</div>
    </div>

    <div class="p-3 md:p-4 overflow-y-auto">
      <!-- <embed width="100%" height="100%" src="https://pdfobject.com/pdf/sample-3pp.pdf"></embed> -->
      <iframe class="w-full min-h-full" width="100%" height="100%" src="https://www.youtube.com/embed/cvFt2Xcuois" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    <div class="bg-gray-100 border-t p-3 md:p-4">Footer</div>
  </div>
</div>