React中如何让OrderPanel与OrderMenu两个容器组件并排显示？

我希望将Order Panel和Order Menu这两个容器组件并排显示。在CSS中尝试了display: inline-block和flex-direction: row属性，给父组件Order设置flex后，两个组件的宽度被压缩，始终无法正常并排，求指导排查错误。

现有代码 #

React组件代码 #

// Order.js
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;

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

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

export default OrderMenu;

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

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

export default OrderPanel;

CSS代码 #

.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;
}

错误排查与修复方案 #

核心问题点 #

1. 父容器未启用Flex布局：.Order只设置了flex-direction: row，但没有添加display: flex，Flex相关属性完全不生效。
2. 过大的margin导致布局挤压：.Order-Panel的margin-right: 60vw占了大部分视口宽度，直接把.Order-Menu挤到下一行，同时压缩自身宽度。
3. inline-block的空格问题：用inline-block实现并排时，组件间的换行/空格会产生额外间距，容易导致布局错位，不如Flex布局稳定。

修改后的CSS代码 #

.Order {
    background-color: darkkhaki;
    height: 100vh; /* 改为100vh确保高度足够，避免父容器高度不足导致子组件显示异常 */
    display: flex; /* 启用Flex布局 */
    flex-direction: row; /* 设置横向排列，可省略，默认就是row */
    gap: 2vw; /* 用gap控制子组件间距，替代margin-left避免重复间距 */
    padding: 2vh 2vw; /* 给父容器加内边距，替代子组件的margin-top和部分margin-left */
    box-sizing: border-box; /* 确保内边距不增加容器总宽度 */
}

.Order-Panel{
    background-color: beige;
    height: 60vh;
    width: 50vh;
    /* 移除多余的margin-right和display: inline-block，以及无效的flex-direction */
}

.Order-Menu{
    background-color: aquamarine;
    height: 10vh; /* 原height:10vw可能适配问题，改为vh统一单位 */
    width: 45vh;
    /* 移除display: inline-block和无效的flex-direction */
}

说明 #

• 父容器启用display: flex后，子组件会自动横向排列，无需再给子组件加inline-block。
• 用gap统一控制子组件间距，比单独给每个子组件加margin更简洁，避免重复间距。
• 移除.Order-Panel中过大的margin-right，释放空间让两个组件能并排显示。
• 调整父容器高度为100vh，确保布局有足够的垂直空间，避免子组件被截断。

内容的提问来源于stack exchange，提问作者Shai Ishr