Flex Shrink

Atomic props for controlling how flex items shrink.

Atomic Props	CSS Properties
flexShrink={value}	flex-shrink: {value}

Shrink

Use flexShrink={1} to allow a flex item to shrink if needed.

Result

Loading...

Live Editor

<Box spaceX3 row> <Box bgOrange400 p4 w-100></Box> <Box bgOrange500 p4 flexShrink={1} w-600> Shrink </Box> <Box bgOrange400 p4 w-100></Box> </Box>

<Box spaceX3 row>
  <Box bgOrange400 p4 w-100></Box>
  <Box bgOrange500 p4 flexShrink={1} w-600>
    Shrink
  </Box>
  <Box bgOrange400 p4 w-100></Box>
</Box>

Don't shrink

Use flexShrink={0} to prevent a flex item from shrinking.

Result

Loading...

Live Editor

<Box spaceX3 row> <Box bgOrange400 p4 w-100></Box> <Box bgOrange500 p4 flexShrink={0} w-600> Not Shrink </Box> <Box bgOrange400 p4 w-100></Box> </Box>

<Box spaceX3 row>
  <Box bgOrange400 p4 w-100></Box>
  <Box bgOrange500 p4 flexShrink={0} w-600>
    Not Shrink
  </Box>
  <Box bgOrange400 p4 w-100></Box>
</Box>