JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="child">
    Child component
    <div class="child2">
      <div class="child2-1">
        <div class="something">
        
          Something
        </div>
        <div class="something-content">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
        </div>
      </div>
      <div class="child2-2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
      </div>
    </div>
  </div>
</div>

SCSS

.container {
  width: 300px;
  height: 400px;
  background: orange;
}

.container .child {
    background: green;
    height: -webkit-calc(100% - 200px);
    height: -o-calc(100% - 200px);
    height: -moz-calc(100% - 200px);
    width: 200px;
}

.container .child .child2 {
    background: white;
    height: 100%;
    display: flex;
    width: 100%;
}

.container .child .child2 .child2-1,
.container .child .child2 .child2-2 {
  flex-grow: 0.5;
}

.container .child .child2 .child2-1:nth-child(1){
   background: grey;
}

.container .child .child2 .child2-1 .something {
  height: 50px;
}
.container .child .child2 .child2-1 .something-content {
  height: -webkit-calc(100% - 50px);
  height: calc(100% - 50px);
  height: -moz-calc(100% - 50px);
  overflow-y: auto;  
}

.container .child .child2 .child2-2:nth-child(2){
   background: black;
   color: white;
}