Div height follow smaller div height - html

Question

I have two divs, one beside the other. The left one will have a lot of content, so i want to put scrollbar on it. The right div will have less content so left div should follow height of right div.
Content of right div is dynamic so I can't set max-height of left div. I tried with display:table-cell but unsuccessfully.
.container {
display: table;
border: 2px solid red;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 30px;
border: 2px solid blue;
}
<div class="container">
<div class="row">
<div class="cell">CELL1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus a facilis saepe. Commodi exercitationem, provident nemo ea distinctio dolor ullam ab facere blanditiis inventore debitis nobis vitae maxime suscipit accusantium.</div>
<div class="cell">CELL2: lorem lorem lorem lorem</div>
</div>
</div>
JSFIDDLE DEMO

Answer 1

You can do this by wrapping the first cell (I call it with first class here) and calling it absolute.
<div class="cell first">
<div>
CELL1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus a facilis saepe. Commodi exercitationem, provident nemo ea distinctio dolor ullam ab facere blanditiis inventore debitis nobis vitae maxime suscipit accusantium.
</div>
</div>
and apply this:
.cell.first div{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
and overflow-y: auto for each cell.
Maybe you have to adjust the widths. See example below:
.container {
display: table;
border: 2px solid red;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 30px;
border: 2px solid blue;
position: relative;
overflow-y: auto;
}
.cell.first div{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
<div class="container">
<div class="row">
<div class="cell first">
<div>
CELL1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus a facilis saepe. Commodi exercitationem, provident nemo ea distinctio dolor ullam ab facere blanditiis inventore debitis nobis vitae maxime suscipit accusantium.
</div>
</div>
<div class="cell">CELL2: lorem lorem lorem lorem</div>
</div>
</div>
Cheers! Let me know your feedback on this. Thanks!

Answer 2

try this,
HTML
<div class="container">
<div class="row">
<div class="cell">
<div class="cell-content">
CELL1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus a facilis saepe. Commodi exercitationem, provident nemo ea distinctio dolor ullam ab facere blanditiis inventore debitis nobis vitae maxime suscipit accusantium.
</div>
</div>
<div class="cell">
<div class="cell-content">CELL2: lorem lorem lorem lorem </div>
</div>
</div>
</div>
CSS
.container {
display: table;
border: 2px solid red;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 30px;
border: 2px solid blue;
}
.cell-content{
max-height:200px; /* as per your requirement */
overflow:auto;
}