css - 在 flex 列中放置传单地图并使其填充整个容器

Question

我有这样的事情：

• 
• 

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

我正在使用 Chakra UI lib，但这并不重要，纯 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 放在容器地图显示中，并且在小断点上很好，但它会破坏更大的断点，它们就会被拉伸。所以我只需要找到他们之间的甜蜜点。