Изменить размер элемента div до исходного, «требуемого» размера

У меня есть div с некоторым содержанием в нем:

<div style="overflow: hidden">
    <table>
        ....
    </table>
</div>

Есть несколько экземпляров этого <div> всей странице, и размер варьируется от 250px до 400px. Поскольку многие из них должны быть сложены, я хочу, чтобы они выглядели единообразно и не занимали много места. Итак, я изменил их размер, чтобы иметь только 200px в высоту. Тем не менее, каждая из них имеет кнопку expand, которая должна вывести весь <div>. Однако проблема, с которой я сталкиваюсь, заключается в том, что я не знаю, как ее изменить, когда нажата кнопка расширения. Я пробовал 100%, но он расширяет его до 100% от размера экрана. Как я могу расширить его, чтобы развернуть только до required размера, т.е. размер, который обертывает все содержимое в нем и не более?

Если для решения требуется некоторое вычисление размера javascript, все в порядке.