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

実現したいこと

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

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

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

該当のソースコード

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

試したこと・調べたこと

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

上記の詳細・結果

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

補足

特になし

行動規範の内容に同意します

回答1件

ベストアンサー

このコンポーネントの包含ブロックが初期包含ブロック、という前提になりますが。

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
9</head>
10
11<body>
12    <div class="absolute inset-0 m-4 border-2 border-black p-10">
13        <div class="mx-auto flex h-full gap-4 border-2 border-red-500 p-4"
14            style="max-width:calc( ( 100vh - (2px + 2px) * 2 - var(--spacing) * (4 + 10 + 4) * 2 - 200px - var(--spacing) * 4 * 2 ) / 9 * 16 + 200px + (2px + 2px) * 2 + var(--spacing) * 4 * 3 );">
15            <div class="flex grow flex-col gap-4 border-2 border-blue-500 p-4">
16                <div class="aspect-video border-2 border-green-500">
17                    A(アスペクト比16:9)
18                </div>
19                <div class="min-h-[200px] grow border-2 border-green-500">
20                    B(最小高200px)
21                </div>
22            </div>
23            <div class="w-[200px] border-2 border-blue-500">C(幅200px)</div>
24        </div>
25    </div>
26</body>
27
28</html>