0

有没有办法让我完成这项工作？由于 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>
4

1 回答 1

2

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

如果是，那么下面的代码应该适合你。将高度 (h="full") 提供给 2nd VStack，最后一个Boxwithh="full"将填充剩余空间。

<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 占用所有剩余空间

<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>
于 2021-05-12T18:43:32.540 回答