FlexItem

Shrink

Shrink is the opposite of grow, but uses the same proportionality mechanic. By default, FlexItems shrink at an equal rate, e.g. shrink={1}.

3
2
1
<Flex>
  <FlexItem shrink={3} width="100%">3</FlexItem>
  <FlexItem shrink={2} width="100%">2</FlexItem>
  <FlexItem shrink={1} width="100%">1</FlexItem>
</Flex>