Is there a way to ensure the textarea element dynamically adjusts its height to fill the space between the header and footer without causing a scroll bar when using bootstrap 4? Here is the HTML code snippet I've been working with:
#container {
background-color: rgb(253, 248, 177);
}
#title {
color: white;
padding-top: 7px;
}
#cancel, #submit {
color: white;
font-size: 20px;
}
#add {
font-size: 20px;
}
#delete, #cancel, #submit {
display: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container min-vh-100 d-flex flex-column" id="container">
<!-- header -->
<div class="row align-items-start bg-info" id="header">
<div class="col text-center">
<button type="button" class="btn" id="cancel">✗</button>
</div>
<div class="col text-center">
<h4 id="title">Notebook</h4>
</div>
<div class="col text-center">
<button type="button" class="btn" id="submit">✔</button>
</div>
</div>
<br />
<!-- main -->
<div class="row flex-grow-1">
<div class="col" id="main">
<textarea class="form-control textarea" placeholder="write note" id="note"></textarea>
</div>
</div>
<!-- footer -->
<div class="row align-items-end" id="footer">
<div class="col d-flex justify-content-start" style="padding: 10px; padding-left: 25px;">
<button id="add" class="btn btn-info rounded-circle">
<h4 style="padding: 0px; margin: 0px;">+</h4>
</button>
<button id="delete" class="btn btn-info rounded-circle">🗑</button>
</div>
</div>
</div>I am looking for guidance on achieving this requirement in a responsive manner, avoiding setting specific row numbers for the textarea element. Any insights would be greatly appreciated.