Flexslider viewport won't resize height when viewing shorter image in slideshow

Question

By default Flexslider is supposed to resize its viewport height according to the height of the current image being displayed. On my site Flexslider is fixed at the height of the largest image in the slideshow, leaving all shorter images with blank white space beneath them. Am I doing something to override the responsive height function of Flexslider? Is there any way to fix this?

Live draft: http://parkerrichard.com/freelance/studiogreen/residential/project-01.html

HTML:

                <div class="flexslider">
                    <div class="arrows">
                        <img src="../img/arrow-left.png" class="arrow-left pull-left">
                        <img src="../img/arrow-right.png" class="arrow-right pull-right">
                    </div>
                    <ul class="slides" id="slideshow" ondragstart="return false;">
                        <li>
                            <img src="../img/residential/project-01/img-01.jpg" />
                            <div class="flex-caption right hidden-xs">
                                <div class="caption-content">
                                    <p><span class="hcaption">PROJECT <span class="sm-spaced">1</span></span><br /></p>
                                    <br />
                                    Location: <span class="lite">Los Altos Hills, California</span><br />
                                    Architect: <span class="lite">SDG Architects</span><br />
                                    <br />
                                    <p class="hcap">Earth-tone stone and concrete terraces <br />create Zen-like spaces around this home. <br />California outdoor living is experienced <br />in 'rooms', which include a pool and spa, <br />water feature wall with Buddha sculpture, <br />stone and gas fire pit, and outdoor kitchen <br />and dining pavilion. Each feature is set <br />against a backdrop of ornamental grasses, <br />perennials, and mature specimen trees.</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <img src="../img/residential/project-01/img-02.jpg" />
                        </li>
                        <li>
                            <img src="../img/residential/project-01/img-03.jpg" />
                        </li>
                        <li>
                            <img src="../img/residential/project-01/img-04.jpg" />
                        </li>
                        <li>
                            <img src="../img/residential/project-01/img-05.jpg" />
                        </li>
                        <li>
                            <img src="../img/residential/project-01/img-06.jpg" />
                        </li>
                        <li>
                            <img src="../img/residential/project-01/img-07.jpg" />
                        </li>
                    </ul>
                </div>

CSS:

/*
 * flexslider styling 
 */

.flexslider {
    background:none !important;
    border:none !important;
    box-shadow:none !important;
}

.slides {
    overflow: hidden !important;
}

.slides div .flex-caption {
    overflow: scroll !important;
}

.slides li img {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;

    /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
    */
    -ms-user-select: none;
    user-select: none;
}

.flex-direction-nav a  {
    color: #999 !important;
}

.flex-next {
    padding-right: 30px !important;
}

.arrows {
    position: absolute;
    z-index: 90;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.arrow-left {
    padding-left: 15px;
    opacity: 0;
    transition: opacity .7s ease-out;
    -moz-transition: opacity .7s ease-out;
    -webkit-transition: opacity .7s ease-out;
    -o-transition: opacity .7s ease-out;
}

.arrow-right {
    padding-right: 20px;
    opacity: 0;
    transition: opacity .7s ease-out;
    -moz-transition: opacity .7s ease-out;
    -webkit-transition: opacity .7s ease-out;
    -o-transition: opacity .7s ease-out;
}

.flexslider:hover .arrow-right, .flexslider:hover .arrow-left {
    opacity: 0.8;
    transition: opacity .7s ease-out;
    -moz-transition: opacity .7s ease-out;
    -webkit-transition: opacity .7s ease-out;
    -o-transition: opacity .7s ease-out;
}

.flexslider:hover .flex-prev, .flexslider:hover .flex-next, .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {
    opacity: 0 !important; 
    z-index: 100;
}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 0 !important;}
  .flex-direction-nav .flex-next { opacity: 0 !important;}
  .arrow-right, .arrow-left { opacity: 1}
}

.flex-control-nav {
    text-align: right !important;
    padding-right: 0px !important;
}

.flex-control-paging li {
    margin: 0 0px 0 12px !important;
}

.flex-control-paging li a {
    color: transparent !important;
}

.nodot .flex-control-paging li a { 
    display: none !important;
}

.flex-control-paging li a.flex-active {
    background: #6dab3e !important;
}


/*
 * flexslider caption styling 
 */

.flex-caption {
    position: absolute;
    text-align: left;
    font-size: 11px;
    background:rgba(255, 255, 255, 0.7);
    z-index: 100;
    padding: 20px 10px 35px 30px;
    width: 287px;
    padding-top: 100%;
    bottom: 0px;
    display: none;
    color: #000;
}

.caption-expand {
    padding-right: 0px !important;
    padding-left: 20px !important;
}

.right {
    right: 0;
    margin-bottom: 0px;
}

.show-caption {
    position: absolute;
    top: 48%;
    right: 240px;
    z-index: 99;
    opacity: 0.75;
    filter: alpha(opacity=75); /* For IE8 and earlier */
    pointer-events: none;
    display: none;
}

.hcaption {
    font-size: 13px;
    text-transform: uppercase;
}

.hcap {
    margin-top: -7px;
}

.flex-caption p {
    margin-bottom: -8px;
}

Answer 1

When you initiate in javascript the flexslider apply the property:

smoothHeight: true

Example:

$('.flexslider').flexslider({
    animation: "slide",
    smoothHeight: true
});