How to prevent a group of buttons from wrapping in the mui?-CodePudding

Excepted result:

My code:

<Box sx={{ display: "flex", justifyContent: "space-between", marginTop: 2, width: "100%", overflowX: "scroll" }}>
                <Button variant="outlined" size="small" endIcon={<KeyboardArrowDown />}>Departure at 21:37</Button>
                <Button variant="outlined" size="small" endIcon={<KeyboardArrowDown />}>The lowest cost</Button>
                <Button variant="outlined" size="small" endIcon={<KeyboardArrowDown />}>Options</Button>
</Box>

CodePudding user response：

You can use flex: none; on the buttons.

<Box
  sx={{
    display: "flex",
    justifyContent: "space-between",
    marginTop: 2,
    width: "100%",
    overflowX: "scroll",
    button: {
      flex: "none"
    }
  }}
>
  <Button variant="outlined" size="small" endIcon={<KeyboardArrowDown />}>
    Departure at 21:37
  </Button>
  <Button variant="outlined" size="small" endIcon={<KeyboardArrowDown />}>
    The lowest cost
  </Button>
  <Button variant="outlined" size="small" endIcon={<KeyboardArrowDown />}>
    Options
  </Button>
</Box>