JSFiddle - React, Tailwind, and code Playground

HTML

<div class="core">
        <div class="header">header</div>
        <div class="controls">controls</div>
        <div class="carousel">carousel</div>
        <div class="nav">nav</div>
        <div class="empty"></div>
        <div class="content">
            <div class="main-settings">settings</div>
            p*4>lorem
            <div class="main">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nisi dui. Etiam posuere ultrices urna dignissim tristique.
                Fusce commodo libero eget tortor commodo egestas. In hac habitasse platea dictumst. Sed congue, purus vitae
                dignissim convallis, arcu urna euismod justo, eget congue mi neque posuere nibh. Fusce tristique ex sapien,
                in posuere nisl faucibus vitae. Ut sed enim accumsan, laoreet orci sed, fringilla urna. Donec blandit sodales
                lorem, sit amet hendrerit ligula egestas eu. Praesent congue lectus elit, id ultricies diam auctor id. Suspendisse
                eget ante at velit cursus cursus molestie vitae nibh. Duis urna sem, convallis vitae justo et, tempor elementum
                tellus. Donec dignissim nec dolor elementum pharetra. Nullam eleifend venenatis tortor, et molestie ex ornare
                ut. Quisque nulla metus, vehicula finibus nisi convallis, pharetra efficitur orci. Ut hendrerit accumsan
                lacus, volutpat pellentesque odio facilisis ut. In mattis arcu a lacus volutpat, porta interdum nulla dignissim.
                Donec aliquet purus elit, quis vulputate quam rhoncus quis. Mauris volutpat pulvinar lectus eu porttitor.
                Etiam sit amet dui non arcu interdum sagittis. Pellentesque diam libero, fermentum eget efficitur sed, elementum
                sed eros. Morbi ultricies, leo sit amet tristique ornare, lectus odio semper elit, eu blandit felis augue
                a leo. Praesent feugiat, erat eu finibus imperdiet, diam ex elementum risus, id congue est nisl...

CSS

html,
body {
  height: 100% !important;
  font-size: 15px;
  margin: 1px;
  padding: 0;
  overflow: hidden;
  color: beige;

  background-color: rgb(46, 46, 46);
}

.dlt-core {
  display: grid;
  grid-gap: 1px;
  height: calc(100% - 3px);
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "header header"
    "controls controls"
    "carousel carousel"
    "nav nav"
    "empty empty"
    "content content"
    "footer footer";
  grid-template-rows: auto auto auto auto 0 1fr auto;
}

.header {
  grid-area: header;
  display: grid;
  justify-content: center;
}

.nav {
  grid-area: nav;
}

.content {
  grid-area: content;
}

.empty {
  grid-area: empty;
}

.carousel {
  grid-area: carousel;
}

.controls {
  grid-area: controls;
}

.footer {
  grid-area: footer;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #222;
  color: #fff;
  background-color: #555;
  font-size: 0.75rem;
}

.content {
    display: grid;
    grid-gap: 2px;
    height: 100%;
    grid-template-areas: "main-settings main";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  min-height: 0;  /* NEW */
  min-width: 0;   /* NEW; needed for Firefox */
}

.main-settings {
  grid-area: main-settings;
}

.main {
  grid-area: main;
  overflow: auto;
}