How to smoothly increase the height of the element in which some content is inserted?

Question

css

Good morning everybody.
Some content is inserted into the block using js, the height of the block is unknown, the height of the inserted content is also unknown.
How to force the block to increase height not jerky but smoothly?
I tried to set the following styles to the container:
transition: all 1s ease-in-out;
but it does not help.
Here is an example made on codepen, tamm it is clear that the block increases the height in jerks.

Answer 1

var a = $('#container').height(); 
$('#container').height(a); 
$('#container').append('<div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatasd.incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatasd Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatasd</div>');
var b = $('.block').height() + 10; // 10 равен padding. Можно тоже автоматом получать
$('#container').animate({'height':b},1000);

Approximately something like that. Specifically, this is not a very good example, you need to configure it specifically for your project, but it works in general.