Does anyone know how to animate the resizing of a container when the target height is auto?
This is what I use to animate the resize of a container currently, it does resize, but it does not animate. I think it's because it cannot animate when height is auto, as it does animate when height is fixed (such as height: '700px').
.pagecontainer is the overall container, inside it are a bunch of pages (#page1 #page2 #page3 etc), which are the actual content. I'm trying to get .pagecontainer's height to resize.

JS:

Code:
    
<script>

        function setContainerHeight() {
            $(".pagecontainer").animate({
                height: 'auto'
            }, 500);
        }

        $('.link').on('click', function(e){
            $('.pagecontainer>div').fadeOut(0);
            setContainerHeight();
            $(this.getAttribute("href")).fadeIn();
        });

    </script>
CSS:

Code:
    
.pagecontainer {
    min-height:450px;
    width:80%;
    min-width:800px;
    padding:50px 0;
    margin: 0 auto;
 }
 .pagecontainer>div{
    display: none; /*wait until page needs to be faded in*/
    padding-left:50px;
    padding-right:50px;
    position:relative;
 }

HTML:

Code:
    
<div class="pagecontainer">

        <a href="#page1" class="link">page 1</a>
        <a href="#page2" class="link">page 2</a>
        <a href="#page3" class="link">page 3</a>

        <div id="page1">TONS OF TEXT HERE</div>

        <div id="page2">A BIT OF TEXT HERE</div>

        <div id="page3">BUNCH OF IMAGES</div>

 </div>

Thanks.