Aspect-ratio elements overflow container

Question

I want to contain two 16:9 video elements vertically within a wrapper. I want that the elements respect the bounds of the wrapper and resize responsively to the window while maintaining their aspect ratio. When I have more than one element, it overflows the wrapper. In version 3 of TailwindCSS, the new aspect ratio classes work fine. I am using the @tailwindcss/[email protected] tailwind plugin.

https://codesandbox.io/s/aspect-ratio-tailwind-error-slbobj?file=/pages/index.vue

  <div class="flex flex-col min-h-screen">
    <main class="flex-1 flex bg-gray-900 max-h-screen text-white">
      <div class="flex-1 flex flex-col min-h-0 max-h-full">
        <!-- header -->
        <div class="flex-shink-0 flex items-center justify-between p-6">
          top bar
        </div>

        <!-- content -->
        <div class="flex-1 w-full max-w-[1200px] min-h-0 max-h-full mx-auto p-6 bg-green-500">
          <!-- video 1 -->
          <div class="aspect-w-16 aspect-h-9">
            <div class="w-full h-full bg-yellow-500"></div>
          </div>
          <!-- video 2 -->
          <div class="aspect-w-16 aspect-h-9">
            <div class="w-full h-full bg-red-500"></div>
          </div>
        </div>

        <!-- footer -->
        <div class="flex-shink-0 flex items-center justify-between p-6">
          bottom bar
        </div>
      </div>
    </main>
  </div>

What I want is:

package	version
tailwindcss	2.2.15
@tailwindcss/aspect-ratio	0.4.0

Answer 1

You got an overflow because you have an absolute value of max-w-[1200px] in the content container. To solve this problem, use the calc() function with a relative value, and the trick is to use vh, since we need to stop the growth of the div's inside the container.

<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>

<div class="flex flex-col min-h-screen">
  <main class="flex-1 flex bg-gray-900 max-h-screen text-white">
    <div class="flex-1 flex flex-col min-h-0 max-h-full">
      <!-- header -->
      <div class="flex-shink-0 flex items-center justify-between p-6">top bar</div>

      <!-- content -->
      <div class="flex-1 w-full max-w-[calc(100vh-300px)] min-h-0 max-h-full mx-auto p-6 bg-green-500">
        <!-- video 1 -->
        <div class="aspect-w-16 aspect-h-9">
          <div class="w-full h-full bg-yellow-500"></div>
        </div>
        <!-- video 2 -->
        <div class="aspect-w-16 aspect-h-9">
          <div class="w-full h-full bg-red-500"></div>
        </div>
      </div>

      <!-- footer -->
      <div class="flex-shink-0 flex items-center justify-between p-6">bottom bar</div>
    </div>
  </main>
</div>