CSS - I hate viewport heights

I feel like I'm going insane.

Let's talk about viewports in CSS. They're supposed to be our trusty sidekicks, making it a breeze to style DOM elements relative to the viewport. But why, oh why, are they so stubbornly difficult to use?

So, what's driving me to the brink of madness?

Enter the humble footer component on a website.

This seemingly innocent element comes with a couple of simple requirements:

1. It should be at the bottom of the page content.
2. And if the page isn't long enough to fill the viewport, the footer should be at the bottom of the viewport instead.

Seems simple enough, right?

Well, I assumed so. This is how the styling for a basic footer might look like:

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main {
    flex-grow: 1;
}

.footer {
    /* no styling necessary */
}

Looks good, right? It works like a charm... most of the time.

But here's the kicker: 100vh doesn't play nice with scrollbars.

If your website has a defined min-width, and your viewport becomes to be a tad too narrow, voila! Horizontal scrollbar! And that little addition messes with the total height of the document. The height of the page content is now the viewport height plus the height of the horizontal scrollbar and voila number 2! Unnecessary vertial scrollbar!

WHY, oh why, must it be this way?

I have yet to find a satisfactory answer to this problem.

And to add salt to the wound, despite the plethora of new viewport keywords introduced in CSS, none seem to tackle this simple problem.

In protest, I won't specify a min-height for for my container, until the situation improves.