The primary function of calc() is to determine the container's dynamic width and height to produce layout experiences with flexible dimensions. It supports four arithmetic operations: addition (+), subtraction (-), multiplication (*) and division (/).

Let's see a quick example

<div class="container">
    <header>
        <div> Hi I'm a HEADER </div>
    </header>
    <main>
        <!-- you can add more content here to see scroll -->
        <div> Hi I'm a CONTENT </div>
    </main>
    <footer>
        <div> Hi I'm a FOOTER </div>
    </footer>
</div>

/* style fot the above html */
body {
    margin: 0;
    padding: 0;
    font-size: 20px;
}
header {
    background: #9acbdc;
    padding: 16px;
}
footer {
    background: #9acbdc;
    padding: 16px;
}
main {
    background: #efe9dc;
    padding: 12px;
    height: calc(100vh - 134px);
    overflow: auto;
}

And this would be the outcome:

Demo:

In the above example, you can see that the <header> & <footer> remains sticky and only content is scrollable as we have dynamically set the content value with calc().

Till this point, everything seems clear and intelligible. You probably found the solution to your problem. But hold on, what if we insert another div inside the container?

Everything will be messed up, Now again we have to re-calculate height and subtract it from 100vh. That is a real pain each developer deals with.

But you don't have to worry further I got you a solution.

If you are a frontend developer, you probably must hear about display: flex and overflow: auto CSS property. Now just make the container display: flex with height:100vh and the content area which needs to be scrollable to set flex:1 and overflow: auto.

Let's illustrate with an example

<div class="container">
    <header>
        <div> Hi I'm a HEADER </div>
    </header>
    <main>
        <!-- you can add more content here to see scroll -->
        <div> Hi I'm a CONTENT </div>
    </main>
    <footer>
        <div> Hi I'm a FOOTER </div>
    </footer>
</div>

/* style fot the above html */
body {
    margin: 0;
    padding: 0;
    font-size: 20px;
}
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
header {
    background: #9acbdc;
    padding: 16px;
}
footer {
    background: #9acbdc;
    padding: 16px;
}
main {
    flex: 1;
    background: #efe9dc;
    padding: 12px;
    overflow: auto;
}

The result would still be the same. But as you noticed we didn't mention any height on any div. Using a flex & overflow will do its magic.

Demo:

---

Conclusion

Keep in mind that calc() is another strong CSS property you should utilize, but only on the presumption that no further blocks or text will be added. However, it is preferable to employ flex and overflow, which enable effortless scrolling of your content area either you add blocks or remove blocks.

I hoped you found this information useful. Any additional queries you may have are welcome, so don't hesitate to ask. I'm always glad to assist.