I have a division filled with various content:
<div style="overflow: hidden">
<table>
....
</table>
</div>
There are numerous occurrences of this <div> scattered throughout the webpage, ranging in height from approximately 250px to 400px. As I plan to stack them together, I aim for uniformity in appearance and space efficiency. To achieve this, I uniformly resized all divs to a height of only 200px. However, each one includes an expand button meant to reveal the entire <div>. The challenge lies in determining how to resize it when this button is clicked. I attempted 100%, but this resulted in expanding it to 100% of the screen size. How can I make it expand to the precise required size that encapsulates all its content without excess?
If the solution necessitates some JavaScript calculations for sizing, that would be acceptable.