JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="child1">
        child1
    </div>
    <div class="child2">
        <div class="child3" style="height: 100px;">
            child3
        </div>
    </div>
</div>

<button onclick="increaseHeight()">increase child3 height</button>

SCSS

.parent {
  background-color: rgba(1,0,0,0.3);
  height: 200px;
  width: 200px;
  
  display:flex;
  flex-direction: column;
}
.child1 {
  background-color: green;
  border: 1px solid black;
  height: 40px;
  
  flex: none;
}
.child2 {
  border: 2px solid blue;
  display: flex;
  flex-direction: column;
  background-color: blue;

  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.child3 {
  background-color: orange;
}

JavaScript

var counter = 10;
var div = document.querySelector('.child3');

window.increaseHeight = function (){
  div.style.height = ++counter * 10 + "px";
}