Element has 20vh width but it also has a navbar. When I use transform to hide this element it does not hide because scrollbar is visible.

<Flex width="100%">
          <Grid
            transform="translateX(-20vh)"
            overflowY="scroll"
            maxH="30vh"
            marginLeft="1.5rem"
            width="20vh"
          >
            <FilterType />
          </Grid>
          <Box
            transform="translateX(-20vh)"
            width="3rem"
            height="5rem"
            bgGradient="linear(to-r, orange.300, orange.400)"
            borderTopRightRadius="50%"
            borderBottomRightRadius="50%"
          >
            <Grid height="100%" placeItems="center">
              <ArrowRightIcon color="white" />
            </Grid>
          </Box>
        </Flex>