Looking at this div structure:
DIV3 has a fixed height.
The nested DIV5 will be receiving content from Ajax, causing its height to change. Additionally, there are some DHTML elements inside it that also affect the height. DIV5 has a fixed min-height set.
DIV6 contains fixed content, but its height needs to adjust according to the height of DIV5.
The issue at hand: If I set the height of DIV6 as 'auto', the size is fine, but the scrollbar does not function properly. However, if I set it as '100%', the scrollbar works, but the end of DIV6 gets cut off when DIV5 increases in height.
I'm unsure if this explanation is clear enough...
Here's the code snippet provided:
<div style="height: 850px; width: 1000px; display: table;">
<div style="height: 850px; float: left;"></div>
<div style="height: 850px; width: 598px; float: left;">
<div id="DIV5" style="max-height: 200px; width: 598px; overflow-x: hidden; overflow-y: scroll;"></div>
<div id="DIV6" style="height: 200px; width: 598px; overflow-x: hidden; overflow-y: scroll;"></div>
</div>
<div id="definicoes" style="height: 850px; width: 200px; float: left;"></div>
</div>