Adjustable height of <footer> and dynamically reducing height of <content>

In container I have navbar, content (to display messages, fils up space beetween navbar and footer) and footer (with textarea and button). Footer is fixed to bottom of the page. Height of footer is rising (navbar direction) up to textarea{rows={6}} and at the same time content is getting smaller.

.container{
   position:relative;
   display: flex;
   flex-direction: column;
}
.navbar{
   // not important
}
.content{
   max-height: 74vh;
   height: auto;
   overflow: auto;
   overflow-x: hidden;
   flex-direction: column;
}
.footer{
   display: flex;
   position: fixed;
}

<div class='container'>
  <div class='navbar'></div>
  <div class='content'></div>
  <div class='footer'></div>
</div>

With that configuration footer height is riseing but content is not getting smaller at the same time. Somebody can help?