We are currently working on a layout that requires a slider image to completely fill the height of its parent element.
After successfully creating a static example with an inline background image and utilizing flexbox to ensure the div fills the height of its parent, we encountered difficulties when attempting to implement this within a slider format. Despite trying various solutions, such as applying height:100%; to parent elements up the DOM hierarchy to body or html, the desired effect was not achieved. You can view our static image example here: http://jsfiddle.net/cmscss/WLggG/29/
/* HERO STYLES */
/* Ensure hero children expand to fit height of parent due to issues with height:100%; */
.hero {
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
background-color: #eeeeee;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
.hero-image,
.hero-text {
width: 50%;
}
/* HERO IMAGE STYLES */
/* Make inline hero image stretch to fill background */
.hero-image {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Set slide img tag as transparent for utilization of background-size property */
.hero-image img {
margin: 0;
line-height: 0;
/* For IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* For IE 5-7 */
filter: alpha(opacity=0);
/* Modern browsers */
opacity: 0;
}
We are now seeking guidance on how to create the necessary additional divs for a slider while preserving flexbox's full height behavior. View our attempt here: http://jsfiddle.net/cmscss/WLggG/27/
If anyone has insights on applying flexbox's layout behavior to grandchildren elements to replicate the success of our initial JSFiddle example, your input would be greatly valued.