Cirrus

#Max Height

Classes to set the maximum height of an element.

ClassStyles
max-h-none
max-height: none;
max-h-10p
max-height: 10%;
max-h-20p
max-height: 20%;
max-h-30p
max-height: 30%;
max-h-40p
max-height: 40%;
max-h-50p
max-height: 50%;
max-h-60p
max-height: 60%;
max-h-70p
max-height: 70%;
max-h-80p
max-height: 80%;
max-h-90p
max-height: 90%;
max-h-100p
max-height: 100%;
max-h-screen
max-height: 100vh;

#Examples

Using these classes it quite simple to control the maximum height an element should have. You can either use a percentage based class or use a class to span the whole screen using the max-h-[size] syntax.

max-h-100p
<div class="p-4 bg-green-100 u-round-xs text-white font-bold u-text-center">
    <div class="max-h-100p p-2 bg-green-500 u-round-xs">max-h-100p</div>
</div>

#Responsive

⚠ Note that the viewport variants are disabled in the default build of Cirrus. To enable, you must enable it yourself in _configs.scss and create a custom build or enable it in the config in your Sass project.

//_configs.scss
$config: (
    viewports: (
        flags.$MAX-HEIGHT: true,
    )
) !default;

To use the viewport variant of a given class, you just need to suffix each class with a viewport selector. For example, if I only want max-h-0 to be applied to some element for lg and above, then I would use the max-h-0-lg class.

<div class="max-h-0-lg">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.

#Variants

The classes specified above are the default utility classes for setting maximum heights. You can add, change, or remove classes within the _config.scss file of Cirrus.

// _config.scss
$config: (
    extend: (
        max-heights: (
            '25p': '25%',
        )
    )
) !default;

This would generate the following additonal classes.

.max-h-25p {
    max-height: 25% !important;
}

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.