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>

7 Replies

i_lost_to_loba_kreygasmOP•5mo ago

Like I understand if the left side had an width or basis of 300px , it would wrap next line but what causes an element with flex-basis:0% to wrap next line

ἔρως•5mo ago

doesn't flex: 1 set flex-grow to 1?

i_lost_to_loba_kreygasmOP•5mo ago

yes anyone ?

ἔρως•5mo ago

can you show it running somewhere?

i_lost_to_loba_kreygasmOP•5mo ago

https://rabbit-api-two.vercel.app/ feel free

ἔρως•5mo ago

i don't see anything wrong with it

i_lost_to_loba_kreygasmOP•5mo ago

I wanted to know what determines the minimum width of the left side that it begins to wrap to next line ,it doesnt have any width defined , only the right one has width of 320px oh I got it The button has a min width

Gaming

Programming

Flex 1