将传单地图放置在 flex 列中并使其填满整个容器

如何解决将传单地图放置在 flex 列中并使其填满整个容器

我有这样的事情：

• 

• 

这是两个不同的断点。当容器被表单拉伸时，地图会填充它的容器，但是当 flex 将方向更改为行时，它不会。如何在不为地图高度提供固定值的情况下解决此问题？

我正在使用 Chakra UI 库，但这并不重要，纯 css 解决方案也可以。

<Stack mt="2" direction={{ base: 'column',md: 'row' }}>
          <Box
            flex={{ md: 1,sm: 1,lg: 2 }}
            bg="white"
            p="2"
            shadow="sm"
            borderRadius="4"
          >
            <CreateDeviceMap
              zoom={10}
              style={{ height: '100%' }}
              center={[51.472829664858644,-0.06935119628906251]}
            />
          </Box>
          <Stack
            flex="1"
            bg="white"
            shadow="sm"
            p="4"
            spacing="2"
            borderRadius="4"
          >
           ... form
          </Stack>
</Stack>

更新：

如果我将 height:100vh 放在容器地图显示中，并且在小断点上没问题，但它会破坏更大的断点，它们会变得拉伸。所以我只需要在它们之间找到最佳位置。