CSS Quickies: min-height
Tags: css, beginners, webdev, html
Published: 2019-11-17 19:10:07

### 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](https://www.instagram.com/lampewebdev/) or [Twitter](https://twitter.com/lampewebdev) 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:

```css
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.

{% codepen https://codepen.io/lampewebdev/pen/mddaPZX %}

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

{% codepen https://codepen.io/lampewebdev/pen/abbPZOB %}

### 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](https://caniuse.com/#search=min-height). 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.

{% codepen https://codepen.io/lampewebdev/pen/oNNJLWp %}

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

**👋Say Hallo!** [Instagram](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment) | [Twitch](https://dev.to/twitch_live_streams/lampewebdev) | [YouTube](https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ)