Flex Shrink

Utilities for controlling how flex items shrink.

Shrink

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

<x.div display="flex">
  <x.div flexGrow={1} w={16}>
    {/* This item will grow or shrink as needed */}
  </x.div>
  <x.div flexShrink={1} w={900}>
    {/* This item will shrink */}
  </x.div>
  <x.div flexGrow={1} w={16}>
    {/* This item will grow or shrink as needed */}
  </x.div>
</x.div>

Don't shrink

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

<x.div display="flex">
  <x.div flexGrow={1} w={16}>
    {/* This item will grow or shrink as needed */}
  </x.div>
  <x.div flexShrink={0} w={32}>
    {/* This item will not shrink below its initial size */}
  </x.div>
  <x.div flexGrow={1} w={16}>
    {/* This item will grow or shrink as needed */}
  </x.div>
</x.div>

Responsive

To control how a flex item shrinks at a specific breakpoint, use responsive object notation. For example, adding the property flexShrink={{ md: 0 }} to an element would apply the flexShrink={0} utility at medium screen sizes and above.

<x.div flexShrink={{ md: 0 }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.