<html>
  <head>
    <title>FlexSlider - Mixed Heights Demo</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	
	
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.1/flexslider-min.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.1/jquery.flexslider.js"></script>
	
	<!--
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider-min.js"></script>
	-->
	
  </head>
  <body>
	<div id="top-content" style="width:300px;height:auto;">
		<div class="flexslider">
			<ul class="slides">
        <li>
					<!-- Slide 1 -->
          <img src="https://placehold.it/300x200" />
				</li>
				<li>
					<!-- Slide 2 -->
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
				</li>
				<li>
					<!-- Slide 3 -->
					<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum Ipsum Lorem Ipsum</p>
				</li>
				<li>
					<!-- Slide 4 -->
					<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
				</li>
				<li>
					<!-- Slide 5 -->
					<img src="https://placehold.it/300x200" />
				</li>
        <li>
					<!-- Slide 6 -->
					<img src="https://placehold.it/300x600" />
				</li>
			</ul>
		</div>
	</div>
  
  <div id="bottom-content"><p>This content appears below the FlexSlider. It should stay in the same position, despite the slider above having images of various sizes.<p></div>
  
  <script>
  // Standard Init for FlexSlider
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
  </script>
  </body>
</html>
/* ---- Flexslider mixed height fix ----- */
/* Set Max heights  on containers and img elements */
@media (max-width:420px){
    ul.slides > li {
        height: 200px;
    }
}
@media (min-width:421px){
    ul.slides > li {
        height: 300px;
    }
}

/* Make content autofit to max-height property, and center both vertically and horizontally with transform */
ul.slides > li > * {
    height: auto;
    max-height : 100%;
    max-width: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    overflow-y: hidden;
}
/* For images specifically, set height to 100% and width to auto so you are keeping aspect ratio */
ul.slides > li > img {
  height : 100%;
  width : auto !important;
}

/* Don't let content clip over edge */
ul.slides > li {
  overflow : hidden;
}
ul.slides > li > p {
  overflow-y : auto
} 
/* --- End Flexslider solution -- */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.