Making a nested div scrollable on page resize

Question

demo

I spent some time on this, but cannot resolve this css issue. I have 4 nested divs. the inner most child div, holds a table of rows.

Html structure

 div class="moduleContentContainer">
 <div id="dash-board-container">
 <div class="dash-board-item">
     <div class=".quote_list_container">
         <table>
             <tr><td>ssss</td></tr>
               <tr><td>ssss</td></tr>
             <tr><td>ssss</td></tr>
             <tr><td>ssss</td></tr>
             <tr><td>ssss</td></tr>
             <tr><td>ssss</td></tr>
             <tr><td>ssss</td></tr>
             <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>]
               <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>

         <table>
     </div>
</div>

(1) I want the dash_Board_Item Div to have its height based on the size of its content(the content in the .quote_list_container div"). so if there is one row, in the table, dash-board-item div should be small in height and taller otherwise, depending on content.

(2) when the window resize, display a scroll bar on the .quote_list_container div when required.

Ray

Answer 1

First, You have a mistake within your HTML: div class=".quote_list_container" you should remove the leading period . from the class name.

Second, since the element containing the contents is nested within couple of elements, you may run into trouble by using max-height with percentage values. Because you would have to specify an explicit height for the parents.

Therefore, you could use vh viewport percentage unit to accomplish that:

Example Here

.quote_list_container {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100vh;
}

Spec from W3C:

vh unit
Equal to 1% of the height of the initial containing block.

It's worth noting that vh viewport relative length is supported in IE9 and above.

Answer 2

i try to solve your problem, see example.

.quote_list_container {
color: #6e6e6e;
font-family: arial;
font-size: 14px;
overflow-y: auto;
overflow-x: hidden;
/* position: relative; */
max-height: 91%;
}

.dash-board-item {
margin-right: 20px;
display: inline-block;
border-style: solid;
max-width: 700px;
min-width: 300px;
border-color: #999999;
border-width: 1px;
/* box-shadow: 0px 0px 1px rgb(109,109,110); */
/* float: left; */
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
position: relative;
    height: 100%;
        overflow: auto;
    
}

#dash-board-container {
position: absolute;
height: 90%;
}

.moduleContentContainer {
width: 100%;
}

<div class="moduleContentContainer">
<div id="dash-board-container">
     <div class="dash-board-item">
         <div class=".quote_list_container">
             <table>
                 <tr><td>ssss</td></tr>
                   <tr><td>ssss</td></tr>
                 <tr><td>ssss</td></tr>
                 <tr><td>ssss</td></tr>
                 <tr><td>ssss</td></tr>
                 <tr><td>ssss</td></tr>
                 <tr><td>ssss</td></tr>
                 <tr><td>ssggggss</td></tr>
                 
             <table>
         </div>
    </div>
</div>
</div>