React에서 2개의 서로 다른 컨테이너를 나란히 표시하는 방법은 무엇입니까?

Question

주문 패널과 주문 메뉴를 나란히 배치하고 싶습니다. 둘은 서로 다른 구성 요소(컨테이너)입니다. 내 CSS에서는 display: inline-block 및 flex-direction:row를 사용해 보았습니다. 상위 구성 요소(Order)에 대해 flex를 시도했지만 두 구성 요소의 너비가 줄어듭니다. 이건 정말 간단한 일인데 난 할 수가 없어요. 누군가 오류를 찾도록 안내해 줄 수 있나요?

"react"에서 React 가져오기;
"@material-ui/core/Container"에서 컨테이너를 가져옵니다.
"@mui/joy/Stack"에서 스택을 가져옵니다.
"./OrderPanel"에서 OrderPanel을 가져옵니다.
"./OrderMenu"에서 OrderMenu를 가져옵니다.
import "./Order.css";


함수 주문() {
  반품 (
    <>
      <div className="주문">
          <주문 패널 />
          <주문메뉴/>
      </div>
    </>
  );
  
};

기본 주문 내보내기;

"반응"에서 반응을 가져옵니다.
"@material-ui/core/Container"에서 컨테이너를 가져옵니다.
"@mui/joy/Stack"에서 스택을 가져옵니다.
"./OrderPanel"에서 OrderPanel을 가져옵니다.
import "./Order.css";


함수 주문메뉴() {
  반품 (
    <>
      <div className="주문 메뉴">
        <컨테이너>주문 메뉴</컨테이너>
      </div>
    </>
  );
}

기본 OrderMenu 내보내기;


"반응"에서 반응을 가져옵니다.
"@material-ui/core/Container"에서 컨테이너를 가져옵니다.
"@mui/joy/Stack"에서 스택을 가져옵니다.
import "./Order.css";
"./Order"에서 주문 가져오기;

함수 OrderPanel() {
  반품 (
    <>
      <div className="주문 패널">
        <컨테이너>주문 패널</컨테이너>
      </div>
    </>
  );
}

기본 OrderPanel 내보내기;

.주문 {
    배경색:어두운 카키색;
    높이: 50%;
    플렉스 방향: 행;
}

.주문 패널{
    배경색: 베이지;
    왼쪽 여백: 2vw;
    오른쪽 여백: 60vw;
    여백 상단: 2vh;
    높이: 60vh;
    폭: 50vh;
    플렉스 방향: 행;
    디스플레이: 인라인 블록;
    
}

.주문-메뉴{
    배경색: 청록색;
    여백 상단: 2vh;
    왼쪽 여백:2vw;
    높이:10vw;
    폭: 45vh;
    디스플레이: 인라인 블록;
    플렉스 방향: 행;
}

Answer 1

mui 문서 따르기(단방향)

반면에 두 개의 컨테이너를 나란히 배치하려면 Grid mui 구성 요소

를 사용할 수 있습니다. 으아악

컨테이너 생성 결과 출력