Flexslider height's equal the tallest on a mobile browser

Question

I am trying to figure out an issue with Flexslider that only appears when I test it on an mobile browser such as Safari Mobile.

All of the

containers are the

Answer 1

Here is a CSS only solution. This is tested for the animation: "slide" property:

.flexslider .flex-viewport { display: flex; flex-direction: column; }
.flexslider .flex-viewport > ul { display: flex; }
.flexslider .flex-viewport > ul > li { display: flex !important; }

The !important overrides the display:block; property that flexslider generates as inline style. Now all panels share an equal height, based on the highest slide.