It's time you understood min-height and max-height

Min-height and max-height are highly underutilized when it comes to writing responsive designs. There is rarely ever a need for every breakpoint to have the height of its element defined:

.wrapper {
  height: 100%; 
  }

@media screen and (min-width:768px){
.wrapper {
  height: 400px; 
    }
  }

@media screen and (min-width:1440px){
.wrapper {
  height: 760px; 
    }
  }

👆 The above (is bad code) can be better.

In this article, you will finally understand min-height, max-height (plus a bonus), and how you can start to implement it in your code immediately.

height

The height property defines the fixed height of an element. If the content in an element increases, the height would not increase, it is fixed.

.wrapper {
  height: 200px; 
    }

👆 This is fine. However, it is not a scalable design, i.e, it has no capacity to handle growth. What happens when the project stakeholders decide that the content does not tell much and more content should be added like this:

Imagine this was a full-fledged app with other contents beneath this box. This is bad. You can fix it, but it should be prevented.

max-height

max-height is the maximum height an element should have. When you give an element a max-height, you are simply saying - do not grow beyond this specified height.

.wrapper {
  height: 100%;
  max-height: 250px; 
    }

👆 From the code above, you can assume the result.

1. max-height will override the specified height
2. Even if the content in the element grows, maximum height ensures that the box height does not grow beyond the specified height. The resulting display is this:

However, max-height comes in handy when you want an element to have a fixed height on larger screen sizes. It is a much better alternative to having media queries for heights on various viewports.

min-height

min-height defines the minimum height an element should have. min-height grows to accommodate the content inside of it.

Things to note about min-height:

1. It overrides height
2. If height is smaller than the content, min-height grows to wrap around it
3. If height is greater than the min-height, the element takes the defined height.

Let's see some examples:

.wrapper {
  height: 100px;
  min-height: 250px; 
    }

👆 The above is a similar code to what we had with max-height. Only in this instance, we are using the min-height and we expect a different result given the points we were given

👆 Using min-height, the element grows to wrap around the contents of the box. Also, it overrides the height. Let's see what happens when height is greater than min-height.

.wrapper {
  height: 150px;
  min-height: 100px;
    }

What just happened? Nothing.

When the value of height is greater than the value of min-height. The value of height is applied to the element, and it forfeits the goodies that comes with min-height property, i.e, it doesn't grow.

Bonus point:

height: auto

height: auto is the best of all worlds, depending on your use-case. The content in the element determines the height of the element. If there is only a little content, the height is just that. If there are more content, the height grows.

How is this different from min-height? min-height grows to wrap around more content, but it already has a defined height. Therefore, if there are less content than the height, it still takes up the space defined.

setting height: auto allows the element to only take up the space it needs.

How is this different from height: 100%

height: 100% takes up 100% of the height of it's parent container. height: auto depends on it's children (content) for it's height.

I hope you learnt something. Today is a good day to refactor that codebase and get rid of the various heights for different query points.

Till next time. keep learning, keep growing ✌️