How to embed in a CSS modal iframe or pdf to full dynamic (responsive) height?

Question

I'm using Tailwind CSS for a modal (similar to Bootstrap's one).

What I do not understand is how to embed objects (iframe, pdf) to modal body's full height (which is dynamic based on screen height).

Example: https://play.tailwindcss.com/dxKwbYilfD

I think this is not only a problem with Tailwind, is between CSS and myself! :)

As you can see I'm using height="100%" here but I need something like min-height: 100% which obviously is not working here.

What is working is height:-webkit-fill-available but is unusable on each browser because of -webkit part.

How to do here? I searched a lot without results.

<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>

question from:https://stackoverflow.com/questions/65648354/how-to-embed-in-a-css-modal-iframe-or-pdf-to-full-dynamic-responsive-height

Answer 1

Waitting for answers