Flex 1
Can someone explain how does an element with flex 1 and another element with 320px begin to wrap next line?
<Container maxW={"960px"} py={[4, 4, 16]}>
<Flex justifyContent="center" gap={"12px"} wrap="wrap">
{/* Left Side starts below */}
<Box flex={1}>
{/* Heading start */}
</Box>
{/* Left Side ends above */}
{/* Right Side starts below */}
<Grid placeItems={'center'} py={[5,0,0]} w={320}>
<Image borderRadius='lg' src={photo} />
</Grid>
</Flex>
</Container><Container maxW={"960px"} py={[4, 4, 16]}>
<Flex justifyContent="center" gap={"12px"} wrap="wrap">
{/* Left Side starts below */}
<Box flex={1}>
{/* Heading start */}
</Box>
{/* Left Side ends above */}
{/* Right Side starts below */}
<Grid placeItems={'center'} py={[5,0,0]} w={320}>
<Image borderRadius='lg' src={photo} />
</Grid>
</Flex>
</Container>
