How can I create a div which doesn't resize itself when the inner content changes?

Question

I'm trying to create a media feed, which may contain text, images, videos, etc. Some of these posts may be explicit, so I want to hide the content of the post with a warning, which the user would have to click to see the post.

I've successfully done this, except the div containing he post changes size when the warning is clicked. How can I change this so that the size of the div remains constant when the inner content changes?

Answer 1

You can use below code which does not resize div. It will allow to scroll content within fixed size.

eg.

<div class="text-center" style="height: 300px; overflow-y: auto;">
//contents inside div
</div>

Answer 2

You need to set div style to:

height: 100px; // or max-height with any other value
overflow: scroll; // for scrolling content if it's height greater than div's height