JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-container">
    <div class="main-content">
        <div class="container form-container">
            <div class="card">
                <div class="card-body">
                    This should be full height!
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.page-container {
    min-height: 100vh;
}

.main-content {
    min-height: calc(100vh - 0px);
    -webkit-box-flex: 1;
    flex-grow: 1;
}

.container {
    width: 100%;
}

.card {
   display: flex;
   flex-direction: column;
}

.card-body {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    background: #ccc;
}