左と右のスクロール ボタンでそれぞれをパンして、多数のショー リストを表示するウィンドウを作成しようとしています。問題は、フレーム内に 2 つのリスト レイアウトを配置すると、予想どおり、スクロール バーを使用してフル サイズで横に並べて追加されないことです。代わりに、両方を歪ませて同じスペースに収まるようにします。

編集: ここでの最終的な目標は、サーバーからショー オブジェクトのリストを取得することであり、その数はさまざまであることに言及するのが賢明かもしれないと思いました。そのため、それらを保持する div の幅は変更に適応する必要があります。

これが私が求めているものです。

実際に起こっていることは次のとおりです。

色のグラデーションがあるだけなので、自分が何をしているかがわかります。正しくパンしていることを確認したら、透明に変更します。以下は私のコードです。どなたかアドバイスをいただければ幸いです。

Shows.js:

import {useState} from 'react';

'./Shows.module.css' からスタイルをインポートします。

const ショー = () => {

    const Show = (詳細) => {

        戻る （



                    テスト
                

        )

    }
    戻る （



今後のショー


<
{Show(null)}
{Show(null)}
>



    )

}
デフォルトのショーをエクスポート
Shows.module.css:
.main {

    表示: フレックス;

    背景: 線形勾配(0度、rgba(0、0、0、0.3)、rgba(0、0、0、0.3))、線形勾配(112.78度、rgba(183、35、35、0.5) 12.87% , rgba(51, 169, 236, 0.5) 52.53%, rgba(74, 183, 35, 0.5) 97.84%), url("../../public/images/concert1.jpg");

    背景サイズ: カバー;

    高さ: 100vh;

    幅: 100vw;

    正当化コンテンツ: センター;

    整列項目: センター;

}
/* ---------------- フレームのスクロール ---------------- */
。容器 {

    位置: 相対;

    表示: フレックス;

    フレックス方向: 列;

    背景: rgba(0,0,0,.5);

    高さ: 82.5%;

    幅: 85%;

    マージントップ: 6%;

}
.scrollContainer {

    表示: フレックス;

    フレックス方向: 行;

    高さ: 90%;

    幅: 100%;

    オーバーフロー: 非表示;

}
.バナー {

    背景: rgba(0,0,0,0.45);

    表示: フレックス;

    高さ: 10%;

    幅: 100%;

    整列項目: センター;

    正当化コンテンツ: センター;

}
.bannerText {

    font-weight: 軽く;

    色: rgba(50, 236, 191, 1);

    text-shadow: 2px 2px rgba(183, 35, 35, 1);

}
.scrollButton {

    表示: フレックス;

    整列項目: センター;

    正当化コンテンツ: センター;

    背景: rgba(0,0,0,0.25);

    色: 白;

    高さ: 100%;

    幅: 5%;

    移行期間: .25 秒;

}
.scrollButton:hover {

    背景: rgba(0,0,0,0.45);

}
。体を見せる {

    表示: フレックス;

    フレックス方向: 行;

    整列項目: センター;

    正当化コンテンツ: センター;

    背景: rgba(0,0,0,0.25);

    高さ: 100%;

    幅: 90%;

    オーバーフロー: 非表示;

}
/* ---------------- リストの表示 ---------------- */
.showMain {

    高さ: 100%;

    幅: 100% !重要;

    表示: フレックス;

    フレックス方向: 行;

    正当化コンテンツ: センター;

    整列項目: センター;

    背景: 線形グラデーション (90 度、#FF0000 -9.27%、rgba (34、255、0、1) 112.68%);

    オーバーフロー: 非表示;

}
.posterFrame {

    高さ: 90%;

    幅: 35%;

    背景: rgba(0,0,0,0.65);

    右マージン: 5%;

}
.textFrame {

    高さ: 90%;

    幅: 50%;

    背景: rgba(0,0,0,0.65);

    色: 白;

}

.scrollContainer {

    表示: フレックス;

    フレックス方向: 行;

    高さ: 90%;

    幅: 100%;

    オーバーフロー: 非表示;

}

これはうまくいきません。次のようにする必要があります:
.scrollContainer {

    表示: フレックス;

    フレックス方向: 行;

    高さ: 90%;

    //幅: 100%; < 間違っている

    //オーバーフロー: 非表示; < 間違っている

    オーバーフロー-x:自動;

    フレックスラップ:ノーラップ;

}
その後
.showMain {

    高さ: 100%;

    //幅: 100% !重要;

    幅: 300px; // 申し訳ありませんが、指定する必要があります

    表示: フレックス;

    フレックス方向: 行;

    正当化コンテンツ: センター;

    整列項目: センター;

    背景: 線形グラデーション (90 度、#FF0000 -9.27%、rgba (34、255、0、1) 112.68%);

    オーバーフロー: 非表示;

}


わかりました。ここでの提案と組み合わせて、私が求めていた並べて表示することができたので、2 つの Show 項目を className showWindow の新しい div に配置しました。ウィンドウの CSS を次のように設定します。
.showWindow {

    幅: 90%;

    表示: フレックス;

    フレックス方向: 行;

    オーバーフロー: 自動;

}

これにより、一度に 1 つずつ表示され、スクロールバーが表示され、スクロール ボタンの邪魔になりません。皆さん、解決策を見つけてくれてありがとう。


CSS を更新する:
.scrollContainer {

  ...

  オーバーフロー: 自動;

}

。体を見せる {

  ...

  フレックス: なし;

}
.scrollButton {

  ...

  フレックス: なし;

}
.sliderContainer {

  表示: フレックス;

  高さ: 100%;

}
次に、コンテンツを sliderContainer でラップします:


<

{Show(null)}
{Show(null)}

>

正常に動作します .