How can I reach dynamic computing of div block height?

Question

I'm newbie in CSS & HTML layout. And I ran into some issue. How can I reach dynamic computing of div block height? In my example exist two nested div blocks. Wrapper and content block who contains the legend of diagram that can be have different size. I need that if size of legend more of wrapper block, scrollbar appeared, otherwise not. How can I reach it? Via CSS or JS and etc. I tried write something like this, but this code binded to constant block size. If content size more than nested block, scrollbar isn't help to see hidden content. Also I have to say that I use Amcharts framework for generate charts https://imgur.com/FaJ9NAo Here you can see result of code( Sorry, I haven't reputation to attach the picture for a right way)

#chartdiv{ /*Some chart block*/
    width: 76%;
    height: 500px;
    float: left;
}
#chartlegenddiv { /*Legend content block*/
    height: 280px; /* need auto computing here */
}

#chartlegendwrapper { /*Legend wrapper block*/
    width: 14%;
    height: 200px;
    float: right;
    overflow-y: auto;
}

Answer 1

 #chartdiv{ /*Some chart block*/ width: 76%; height: 500px; float: left; } #chartlegendwrapper { /*Legend wrapper block*/ width: 14%; max-height: 70px; float: right; overflow-y: auto; } 

 <div id="chartlegendwrapper"><div>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> </div></div> 

You can remove height from #chartlegenddiv . Also replace height with [max-height][1] on #chartlegendwrapper .

No height is the same as height: auto .

From MDN :

The browser will calculate and select a height for the specified element.