CSS Quickies: min-height

What is CSS Quickes?

I started to ask my beloved community on Instagram: "what CSS properties are confusing for you?"

In "CSS Quickies" I will explain one CSS property in depth. These are community requested properties. If you also confused about a CSS property, then write to me on Instagram or Twitter or down below in the comments! I answer all the questions.

Lets talk about min-height in CSS

Sometimes you don't want to set a fixed height of an element. I would even argue most of the time with the responsive and adaptive design. You don't want to set a fixed height anymore. Still, you need to make sure that you have a minimum height. This is why you need the min-height properties.

How to use it

If you have ever used height, you know how to use min-height too.
Here are some examples:

span{
  min-height: 250px;
  min-height: 50%;
  min-height: 100vh;
  min-height: inherit;
}

You can use the whole range of values that you know and love. But how does it work, and what happens if you also set height or 'max-height' on the same element?

In general min-height wins over height and max-height. It prevents the content from ever getting smaller than the provided value. Since the initial value is 0, the min-height does nothing to the element or speaking more technically the min-height is 0, and an element can not be smaller than 0. Speaking of 0, min-height can not be a negative value.

I have created a small codepen to illustrate this, and also you can see some problems that come with using fixed heights and giving max-height a fixed value.

One of the other beautiful things is that it is animatable! Here is an example.

Experimental values

The typical values that you would use for sizes are supported by all browsers even mobile safari (aka the new ie6) ;)

There are also some new values added by the CSS3 spec, which are not supported by all browsers. Since this is changing all the time, you should take a look at caniuse. One of the less supported values is min-height: stretch.

In general, please don't use these in production code! They are not supported by a big enough group of browser vendors, and they can go away very easy!

• available or fill-available
  • Height is equal to the containing block height minus the current element’s margin, border, and padding.
• min-content
  • min-content takes the minimum space that is needed not to overflow the content, but it will grow bigger if the space is there.
• max-content
  • max-content will take up if enough space given only the space it needs for showing its content. So if the parent is higher, it will not be as high as the parent.
• fit-content
  • the same as min-content.
• contain-floats
  • the same as min-content, but it will include floats.

Here is a codepen with the values, but please keep in mind that it probably will not fully work on your browser.

Again: Please don't use this in production code as of late 2019.

👋Say Hallo! Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube