JSFiddle - React, Tailwind, and code Playground

HTML

<div class="layout">
  <div class="header">I am header</div>
  <div class="content">
    <div class="title">Title</div>
    <div class="splitView">
      <div class="splitView-section">
        <div class="sectionTitle">Section title</div>
        <div class="scrollView">
          <div class="veryBigElement"></div>
        </div>
      </div>
      <div class="splitView-section"></div>
    </div>
  </div>
  <div class="footer">I am footer</div>
</div>

SASS

.layout
  display: flex
  flex-direction: column
  width: 640px;
  height: 300px;
  background: rgba(#DC143C, 0.2)
  
.header
  flex: 0 0 auto
  padding: 4px 8px
  background: rgba(#DC143C, 0.2)
  
.content
  display: flex
  flex-direction: column
  flex: 1 1 auto
  padding: 4px 8px
  background: rgba(#FF4500, 0.2)
  overflow-y: hidden
  
.title
  flex: 0 0 auto
  background: rgba(#FFFF00, 0.2)
  
.splitView
  display: flex
  flex: 1 1 auto
  background: rgba(#008080, 0.2)
  overflow-y: hidden
  
  &-section
  
    display: flex
    flex-direction: column
    flex: 1 1 50%

    &:first-child
      background: rgba(#00BFFF, 0.2)
    &:last-child
      background: rgba(#0000FF, 0.2)

.scrollView
  flex: 1 1 auto
  background: rgba(#A52A2A, 0.2)
  overflow-y: auto
  
.veryBigElement
  background: #CD5C5C
  width: 50px
  height: 500px
  box-shadow: rgba(black, 0.25) 0 0 6px

.footer
  flex: 0 0 auto
  padding: 4px 8px
  background: rgba(#ADFF2F, 0.2)