Flex Grow

Atomic Props for controlling how flex items grow.

Atomic Props	CSS Properties
flexGrow={value}	flex-grow: {value};

Grow

Use flexGrow={1} props to allow a flex item to grow to fill any available space.

Result

Loading...

Live Editor

<Box spaceX3 row> <Box bgOrange400 p4> Normal </Box> <Box bgOrange500 p4 flexGrow={1}> Grow </Box> <Box bgOrange400 p4> Normal </Box> </Box>

<Box spaceX3 row>
  <Box bgOrange400 p4>
    Normal
  </Box>
  <Box bgOrange500 p4 flexGrow={1}>
    Grow
  </Box>
  <Box bgOrange400 p4>
    Normal
  </Box>
</Box>

Don't grow

Use flexGrow={0} to prevent a flex item from growing.

Result

Loading...

Live Editor

<Box spaceX3 row> <Box bgOrange400 p4 flexGrow={1}> Grow </Box> <Box bgOrange500 p4 flexGrow={0}> Not Grow </Box> <Box bgOrange400 p4 flexGrow={1}> Grow </Box> </Box>

<Box spaceX3 row>
  <Box bgOrange400 p4 flexGrow={1}>
    Grow
  </Box>
  <Box bgOrange500 p4 flexGrow={0}>
    Not Grow
  </Box>
  <Box bgOrange400 p4 flexGrow={1}>
    Grow
  </Box>
</Box>