Vue.js 纵横比元素溢出容器

我想包含两个16:9在包装器垂直视频元素.我希望元素尊重包装器的边界，并在保持其长宽比的同时响应窗口调整大小.当我有多个元素时，它会溢出包装器.在TailwinCSS的版本3中，新的纵横比类可以很好地工作.我正在使用@tailwindcss/aspect-ratio@0.4.0tailwind 插件.

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>

我想要的是: