Utilities for setting the maximum height of an element.

React propsCSS Properties
maxHeight={size}max-height: {size};
maxH={size}max-height: {size};

Scaled Max-Height

All values specified in the sizes theme section are automatically applied. Note there is a little difference for scales between 0 and 1 due to conflicting with fluid range. You have to add a suffix s to target values from theme, like 0.5 becomes 0.5s and 1 becomes 1s.

<x.div> <x.div maxHeight="1s" h={32} /> <x.div maxHeight={8} h={32} /> <x.div maxHeight={12} h={32} /> <x.div maxHeight={16} h={32} /> <x.div maxHeight={24} h={32} /> </x.div>

Fixed Max-Height

Any valid value is accepted in width, numbers are converted to px, other units have to be specified.

<x.div> <x.div maxHeight={110} h={32} /> <x.div maxHeight="12px" h={32} /> <x.div maxHeight="4rem" h={32} /> <x.div maxHeight="3ex" h={32} /> </x.div>

Fluid Max-Height

Values from 0 to 1 are converted into percentages. As a fraction or a number, both are an expression. Of course specifying [value]% is also possible.

<x.div maxHeight={1 / 2} h={0.3}> maxHeight=1/2 </x.div> <x.div maxHeight={0.5} h={0.7}> maxHeight=0.5 </x.div>


To control the margin of an element at a specific breakpoint, use responsive object notation. For example, adding the property maxHeight={{ md: 1 }} to an element would apply the maxHeight={1} utility at medium screen sizes and above.

<x.div maxHeight={{ xs: 1 / 2, md: 1 }} />

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


Sizes scale

f you'd like to customize your values for width, height, min-width, min-height, max-width, max-height, all at once, use the theme.sizes section of your theme.

// theme.js export const theme = { sizes: { + sm: '8px', + md: '16px', + lg: '24px', + xl: '48px', }, }

Learn more about customizing the default theme in the theme customization documentation.

Edit this page on GitHub