I am attempting to control the layout of the grid on my website using CSS. By utilizing Bootstrap 4, I have created two divs with equal height using display:grid. However, I am facing difficulties in managing the child elements within these divs. I am trying to create a contenteditable div and use JavaScript to display server-side information to the user. My challenge lies in making the height of the div adjust dynamically based on its parent content without hard-coding a fixed height.
<div class="row">
<div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 col-12" style="display: grid;">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="card-title m-0 font-weight-bold text-primary">
param
</h6>
</div>
<div class="card-body">
<div class="row mb-2">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<textarea rows="13" maxlength="1500"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12" style="display: grid;">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="card-title m-0 font-weight-bold text-primary">
consol
</h6>
</div>
<div class="card-body">
<div class="row mb-2">
<div id='console' class='mb-2'
style="min-height: 150px; border-radius: 5px; resize: none; width: 100%; height: 100%; border: 0px; background-color: #f8f8f8; padding: 2px 2px;"
name="console" contenteditable="false"></div>
</div>
</div>
</div>
</div>
</div>
To enhance comprehension and visualization, I have included an image.