如何在 React 中並排顯示 2 個不同的容器？

Question

我想將訂單面板和訂單選單並排放置，它們是兩個不同的組件（容器）。在我的CSS中，我嘗試了display: inline-block 和flex-direction:row。我已經在父組件（Order）上嘗試了 flex，但它減少了兩個組件的寬度。這是很簡單的事情，但我做不到。有人可以指導我找出錯誤嗎？

import React from "react";
import Container from "@material-ui/core/Container";
import Stack from "@mui/joy/Stack";
import OrderPanel from "./OrderPanel";
import OrderMenu from "./OrderMenu";
import "./Order.css";


function Order() {
  return (
    <>
      <div className="Order">
          <OrderPanel />
          <OrderMenu/>
      </div>
    </>
  );
  
};

export default Order;

import React from "react";
import Container from "@material-ui/core/Container";
import Stack from "@mui/joy/Stack";
import OrderPanel from "./OrderPanel";
import "./Order.css";


function OrderMenu() {
  return (
    <>
      <div className="Order-Menu">
        <Container>Order Menu</Container>
      </div>
    </>
  );
}

export default OrderMenu;


import React from "react";
import Container from "@material-ui/core/Container";
import Stack from "@mui/joy/Stack";
import "./Order.css";
import Order from "./Order";

function OrderPanel() {
  return (
    <>
      <div className="Order-Panel">
        <Container>Order Panel</Container>
      </div>
    </>
  );
}

export default OrderPanel;

.Order {
    background-color:darkkhaki;
    height: 50%;
    flex-direction: row;
}

.Order-Panel{
    background-color: beige;
    margin-left: 2vw;
    margin-right: 60vw;
    margin-top: 2vh;
    height: 60vh;
    width: 50vh;
    flex-direction: row;
    display: inline-block;
    
}

.Order-Menu{
    background-color: aquamarine;
    margin-top: 2vh;
    margin-left:2vw;
    height:10vw;
    width: 45vh;
    display: inline-block;
    flex-direction: row;
}

Answer 1

遵循 mui 文件（一種方法）

另一方面，要並排放置兩個容器，您可以使用 Grid mui 元件

<Grid container spacing={2}>
    <Grid item xs={6}>
      <Item>xs=6</Item>
    </Grid>
    <Grid item xs={6}>
      <Item>xs=6</Item>
    </Grid>
</Grid>

產生一個容器 結果輸出