<p>注文パネルと注文メニューを並べて配置したいのですが、これらは 2 つの異なるコンポーネント (コンテナ) です。私のCSSでは、display: inline-blockとflex-direction:rowを試してみました。親コンポーネント（Order）でフレックスを試しましたが、両方のコンポーネントの幅が減少します。とても単純なことですが、私にはそれができません。誰かがエラーを見つける方法を教えてくれますか? </p> <p> <pre class="brush:js;toolbar:false;">React を "react" からインポートします。 "@material-ui/core/Container" からコンテナをインポートします。 "@mui/joy/Stack" からスタックをインポートします。 "./OrderPanel" から OrderPanel をインポートします。 "./OrderMenu" から OrderMenu をインポートします。 "./Order.css" をインポートします。 関数 Order() { 戻る （ <> <div className="注文"> <オーダーパネル /> <メニューの注文/> </div> </> ); }; デフォルトの順序をエクスポートします。 「反応」から React をインポートします。 "@material-ui/core/Container" からコンテナをインポートします。 "@mui/joy/Stack" からスタックをインポートします。 "./OrderPanel" から OrderPanel をインポートします。 "./Order.css" をインポートします。 関数 OrderMenu() { 戻る （ <> <div className="オーダーメニュー"> <コンテナ>メニューを注文</コンテナ> </div> </> ); } デフォルトの OrderMenu をエクスポートします。 「反応」から React をインポートします。 "@material-ui/core/Container" からコンテナをインポートします。 "@mui/joy/Stack" からスタックをインポートします。 "./Order.css" をインポートします。 「./Order」から注文をインポートします。 関数 OrderPanel() { 戻る （ <> <div className="オーダーパネル"> <コンテナ>注文パネル</コンテナ> </div> </> ); } デフォルトの OrderPanel をエクスポート;</pre> <pre class="brush:css;toolbar:false;">.Order { 背景色:ダークカーキ; 高さ: 50%; フレックス方向: 行; } .オーダーパネル{ 背景色: ベージュ; マージン左: 2vw; マージン右: 60vw; マージントップ: 2vh; 高さ: 60vh; 幅: 50vh; フレックス方向: 行; 表示: インラインブロック; } .Order-Menu{ 背景色: アクアマリン; マージントップ: 2vh; マージン左:2vw; 高さ:10vw; 幅: 45vh; 表示: インラインブロック; フレックス方向: 行; }</pre> </p>