flex box with ox component in MUI doesn't work with Toolbar

Question

when I try tp align item in toolbar with flex box it doesn't work

<AppBar
        sx={{
          width: { sm: `calc(100% - ${drawerWidth}px)` },
          ml: { sm: `${drawerWidth}px` },
        }}
        position="fixed"
      >
        <Toolbar>
          <Box sx={{ display: "flex", justifyContent: "space-between" }}>
            <Box>
              <IconButton>
                <MenuIcon />
              </IconButton>
            </Box>
            <Box>
              <IconButton>
                <MailIcon />
              </IconButton>
              <IconButton>
                <InboxIcon />
              </IconButton>
            </Box>
          </Box>
        </Toolbar>
      </AppBar>

and it works only when I remove Toolbar tags.

Answer 1

Only quickly tested the code but I think this is because Box wrapped in Toolbar is not taking full width of its container, and should be solved removing the extra Box, and adding the layout styles on Toolbar instead.

Tested the code here: stackblitz

<AppBar
  sx={{
    width: { sm: `calc(100% - ${drawerWidth}px)` },
    ml: { sm: `${drawerWidth}px` },
  }}
  position="fixed"
>
  <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
    <Box>
      <IconButton>
        <MenuIcon />
      </IconButton>
    </Box>
    <Box>
      <IconButton>
        <MailIcon />
      </IconButton>
      <IconButton>
        <InboxIcon />
      </IconButton>
    </Box>
  </Toolbar>
</AppBar>