Sidebar

This layout uses a combination of flex-basis, flex-grow, and min-width to create a container-based responsive flexbox layout. When there is enough width in the container, the two columns will render side-by-side, otherwise they stack.

Sidebar

Main Content

<Flex
  sx={{
    flexWrap: 'wrap'
  }}>
  <Box
    sx={{
      p: 3,
      flexGrow: 1,
      flexBasis: 256
    }}>
    Sidebar
  </Box>
  <Box
    sx={{
      p: 3,
      flexGrow: 99999,
      flexBasis: 0,
      minWidth: 320
    }}>
    Main Content
  </Box>
</Flex><Flex
  sx={{
    flexWrap: 'wrap'
  }}>
  <Box
    sx={{
      p: 3,
      flexGrow: 1,
      flexBasis: 256
    }}>
    Sidebar
  </Box>
  <Box
    sx={{
      p: 3,
      flexGrow: 99999,
      flexBasis: 0,
      minWidth: 320
    }}>
    Main Content
  </Box>
</Flex>

Sidebar