<p>Je souhaite placer le panneau de commande et le menu de commande côte à côte, ce sont deux composants (conteneurs) différents. Dans mon CSS, j'ai essayé display: inline-block et flex-direction:row. J'ai essayé flex sur le composant parent (Order) mais cela réduit la largeur des deux composants. C'est une chose si simple mais je ne peux pas le faire. Quelqu'un peut-il me guider pour trouver l'erreur ? </p> <p> <pre class="brush:js;toolbar:false;">importer React depuis "react" ; importer un conteneur depuis "@material-ui/core/Container" ; importer Stack depuis "@mui/joy/Stack" ; importer OrderPanel depuis "./OrderPanel" ; importer OrderMenu depuis "./OrderMenu" ; importer "./Order.css" ; fonction Ordre() { retour ( ≪> <div className="Commande"> <OrderPanel /> <MenuCommande/> </div> ≪/> ); } ; exporter la commande par défaut ; importer React depuis « react » ; importer un conteneur depuis "@material-ui/core/Container" ; importer Stack depuis "@mui/joy/Stack" ; importer OrderPanel depuis "./OrderPanel" ; importer "./Order.css" ; fonction CommandeMenu() { retour ( ≪> <div className="Commande-Menu"> <Conteneur>Menu Commande</Conteneur> </div> ≪/> ); } exporter le menu Commande par défaut ; importer React depuis « react » ; importer un conteneur depuis "@material-ui/core/Container" ; importer Stack depuis "@mui/joy/Stack" ; importer "./Order.css" ; importer la commande depuis "./Order" ; fonction CommandePanel() { retour ( ≪> <div className="Order-Panel"> <Conteneur>Panneau de commande</Conteneur> </div> ≪/> ); } exporter le OrderPanel par défaut;</pre> <pre class="brush:css;toolbar:false;">.Ordre { couleur d'arrière-plan : kaki foncé ; hauteur : 50 % ; direction flexible : rangée ; } .Panneau de commande{ couleur de fond : beige ; marge gauche : 2vw ; marge droite : 60 vw ; marge supérieure : 2vh ; hauteur : 60vh ; largeur : 50vh ; direction flexible : rangée ; affichage : bloc en ligne ; } .Menu-Commande{ couleur de fond : aigue-marine ; marge supérieure : 2vh ; marge gauche : 2vw ; hauteur : 10 vw ; largeur : 45vh ; affichage : bloc en ligne ; direction flexible : rangée ; }</pré> </p>

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