youtubeのような動画閲覧ページのレスポンシブデザインの実装

Question

実現したいこと

下図のようなデザインのページで画面幅が広がった場合に、赤枠要素の左右のマージンが均等に広がり、赤枠要素が左右中央揃えになるようにしたいです。

発生している問題・分からないこと

現状は画面幅が広がった場合に、Bの要素がAの要素に押されてはみ出してしまいます。

該当のソースコード

    <div className="absolute inset-0 m-4 border-2 border-black p-10">
      <div className="mx-auto flex h-full gap-4 border-2 border-red-500 p-4">
        <div className="flex grow flex-col gap-4 border-2 border-blue-500 p-4">
          <div className="aspect-video border-2 border-green-500">
            A(アスペクト比16:9)
          </div>
          <div className="min-h-[200px] grow border-2 border-green-500">
            B(最小高200px)
          </div>
        </div>
        <div className="w-[200px] border-2 border-blue-500">C(幅200px)</div>
      </div>
    </div>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

A要素のようにアスペクト比を保ちながら可能な限り大きなサイズを取る実装について調べましたが、解決には至りませんでした。

補足

特になし