Solving Responsive Coding with Min-Height

It’s M from the Engineer team!

min-height is a valuable CSS property, but there are some nuances to using it.

One common challenge is attempting to use min-height to set the height of a parent container while using a percentage value for the height of the child container.

You might notice that the child container doesn’t behave as expected.

In this article, we will explain why this happens and provide solutions to address it.

Understanding Min-Height

Before we dive into the issue, let’s clarify what min-height is and why it’s widely used in web development.

min-height allows you to establish a minimum height for containers.

It’s particularly useful as it sets a baseline height while enabling containers to adapt to different screen sizes, simplifying responsive design.

See the Pen hybrid scrolling by bibomato (@bibomato) on CodePen.

Choosing min-height over height can prevent issues like content overflow or content not displaying properly.

See the Pen hybrid scrolling by bibomato (@bibomato) on CodePen.

The Challenge with Min-Height and Children’s Height

However, when you attempt to define a min-height using viewport height units (VH) and set a child’s height as a percentage of the parent container’s height, you may notice that the child doesn’t really change.

See the Pen hybrid scrolling by bibomato (@bibomato) on CodePen.

Why does this happen?

min-height has a height threshold that it can expand from.

The new height can even be observed using developer tools.

However, when the parent container expands based its content, the height is then larger than the min-height and no longer a constant value, making it difficult for the child to determine its own height.

This is why changing the parent’s min-height to height resolves this issue.

What if we want to continue using min-height?

Thankfully, there are simple solutions to this problem.

Solution #1

You can give the child container a height using VH values.

Converting percentage values into VH values is usually straightforward.

Here’s an example:

.parent
{
	min-height: 60vh;
}

.child
{
	height: 50%;
	height: 30vh;
}

See the Pen hybrid scrolling by bibomato (@bibomato) on CodePen.

If you find this conversion challenging, you can use a conversion tool like https://cruw.co.jp/px-vw/ to help calculate the VH value.

This link uses VW, but the conversion works the same.

Solution #2

Another option is to define the child’s height using Flexbox.

See the Pen hybrid scrolling by bibomato (@bibomato) on CodePen.

Other solutions

There are additional solutions like using CSS Grids and using the frame of the grid to expand to the desired height.

It’s important to note that while most modern browsers support CSS Grid, you may need to consider older browsers that lack support.

Using grid or even Flexbox solutions can lead to more code and increased complexity in maintaining responsive designs.

Conclusion

While using min-height may seem less intuitive at first, it can be a powerful tool for creating responsive designs with clean code.

Remember that the best solutions are often the simplest ones.

Keep experimenting and stay tuned for more insights.

-M