Stack Chakra-UI中剩余的space如何填充？

Question

有什么方法可以使它工作吗？由于 flex={1} 没有完成这项工作？

或者还有更好的方法来实现同样的目标吗？

<HStack w='full' spacing={2} bg='yellow.50' align='flex-start'>
  <VStack align='flex-start' h='full'>
        <Box w={20} h={20} bg='blue.200' class="fixed height element" />
        <Box w='20' h='full' bg='green.200' flex={1} class="Fill the remaining height" />
  </VStack>
  <VStack w='full'>
        <Box h={20} w='full' bg='red.100' />
        <Box h={20} w='full' bg='red.300' />
        <Box h={20} w='full' bg='red.500' />
  </VStack>
</HStack>

Answer 1

不太确定我是对还是错。第一个 VStack（绿色部分）已经填充了剩余的 space，所以您的问题是第二个 VStack 如何填充剩余的 space?

如果是，那么下面的代码应该适合您。为第二个 VStack 提供高度 (h="full")，最后一个带有 h="full" 的 Box 将填充剩余的 space.

<Grid minH="100vh" p={3}>
    <HStack w="full" spacing={2} bg="yellow.50" align="flex-start">
    <VStack align="flex-start" h="full">
        <Box w={20} h={20} bg="blue.200" class="fixed height element" />
        <Box w="20" h="full" bg="green.200" class="Fill the remaining height" />
    </VStack>
    <VStack w="full" h="full">
        <Box h={20} w="full" bg="red.100" />
        <Box h={20} w="full" bg="red.300" />
        <Box h="full" w="full" bg="red.500" />
    </VStack>
    </HStack>
</Grid>

USING only flexbox, Box with flexGrow: 1 占据所有剩余space

<HStack w="full" minH="100vh" alignItems="stretch" spacing={2} bg="yellow.50" align="flex-start">
    <VStack align="flex-start">
        <Box w={20} h={20} bg="blue.200" class="fixed height element" />
        <Box
            w="20"
            flexGrow="1"
            bg="green.200"
            class="Fill the remaining height"
        />
    </VStack>
    <VStack w="full" h="full">
        <Box h={20} w="full" bg="red.100" />
        <Box h={20} w="full" bg="red.300" />
        <Box h={20} w="full" bg="red.500" />
    </VStack>
</HStack>

Stack Chakra-UI中剩余的space如何填充？

How to fill the remaining space in a Stack Chakra-UI?

css

reactjs

chakra-ui