Allow a drop-down element to overflow a container that has scrolled overflow

Question

I encountered an issue while attempting to create a navbar with a dropdown menu. The navbar's position is set to absolute, and I wanted it to be scrollable vertically on smaller devices. Additionally, I wanted the dropdown content to be displayed outside the boundaries of the sidebar. In order to address this problem, I followed a suggestion provided in this link: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue).

However, this solution did not resolve the problem for me. When I tried to implement the suggested solution, either the navbar was not scrollable in the horizontal direction or the dropdown menu was not displayed outside the sidebar boundaries.

This is my current code:

         <div overflowY='visible'>
          <div overflowX={{ base: 'scroll', lg: 'hidden' }}>
            <Box p={4} zIndex='1' position="absolute" width={[200, 275, 350, 400, 650]}>
              <HStack spacing={2} justifyContent='space-between'>
                <ButtonGroup>
                  <Menu>
                    <MenuButton as={Button} leftIcon={<FaChevronDown />}>
                      {selectedLayer}
                    </MenuButton>
                    <MenuList>
                      {layers.map((layer) => (
                        <MenuItem key={layer} onClick={() => handleLayerChange(layer)}>
                          {layer}
                        </MenuItem>
                      ))}
                    </MenuList>
                  </Menu>
                </ButtonGroup>
              </HStack>
            </Box>
          </div>
        </div>

Thanks in advance!

Pantalets