Auto adjust height of the panel based on div height bootstrap

Question

I am newbie to front end development.. We are building a one page app and we have two panels.

Panel at the top contains a input text for search and below the input text is a ag-grid with pagination.

When user clicks on some of the cell values in the grid column, a div with explanatory text appears below the grid and within the panel. Now this text length can vary from 2 lines to 20 lines. What I would like to achieve is auto adjust the panel height to cover both ag-agrid and div without any empty space when text is smaller and not have the text in div overflow the panel when the text is larger and this should work fine in all resolutions.I am using bootstrop css classes for panel - panel primary for panel..appreciate any insights..

  <div class="container-fluid">
     <div class="panel panel-primary" style="height:auto">
         <div class= "panel-heading"> {{panelTitle}} </div>
            <div class="panel body">

                <ag-grid-angular class="ag-blue" [gridoptions]="gridOptions" rowModelType="pagination" style="min-height:70%"></ag-grid-angular>

                  <div class="alert"> {{description}}
                   </div>
            </div>
     </div>
 </div>

Answer 1

U can use a css to set the height of the panel automatically

.panel_name{
   height:auto;
}

Answer 2

In bootstrap you can use the class "h-auto"

<div class="container-fluid">
   <div class="panel panel-primary h-auto">
     <div class= "panel-heading"> {{panelTitle}} </div>
        <div class="panel body">
            <ag-grid-angular class="ag-blue" [gridoptions]="gridOptions" rowModelType="pagination" style="min-height:70%"></ag-grid-angular>
              <div class="alert"> 
                 {{description}}
              </div>
        </div>
   </div>
</div>