JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
  <div class="app">
				<header class="main-head">The header</header>
				<nav class"main-nav">
				</nav>
				<article class="content">
          <div class="component">
              <div>just here as a placeholder to whatever pushes the div below down</div>
              <div class="table-view">
                <div class="table-content-wrapper">
                  <div class"table-content" style="height:1410px;">
                    scrollable rows go here
                  </div>
                </div>
              </div>
          </div>
				</article>
				<footer class="main-footer">The footer</footer>
			</div>
</body>
</html>

CSS

index
* {
	box-sizing: border-box;
}

body {
	width: 100vw;
	height: 100vh;
	margin: 0px;
	padding: 0px;
}

.main-head {
	min-width: 0;
	min-height: 0;
  border: 1px solid #ccc;
	grid-area: header;
}

.content {
	min-width: 0;
	min-height: 0;
  border: 1px solid #ccc;
	grid-area: content;
}

.main-nav {
	min-width: 0;
	min-height: 0;
  border: 1px solid #ccc;
	grid-area: nav;
}

.main-footer {
	min-width: 0;
	min-height: 0;
  border: 1px solid #ccc;
	grid-area: footer;
}

.app {
	display: grid;
	grid-gap: 20px;
	grid-template-areas: "header" "nav" "content" "footer";
	grid-template-rows: 1fr 1fr 10fr 1fr;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

@media (min-width: 700px) {
	.app {
		grid-template-columns: 1fr 5fr;
		grid-template-rows: 2fr 25fr 1fr;
		grid-template-areas: "header header" "nav content" "footer footer"
	}

	nav ul {
		flex-direction: column;
	}
}

.component {
  height:100%;
  display:flex;
  flex-flow:column;
}

.table-view {
  height:100%;
  width:100%;
  border: 1px solid #ccc;
  background: #fff;
  
  display:flex;
  flex-flow:column;
}

.table-content-wrapper {
  flex: 1;
  overflow: auto;
}

.table-content {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100%;
}