Trouble understanding how to next flexbox full height behaviour

Question

We have a layout where we'd like a slider image to fill the height of it's parent.

We've achieved a static image example (no slider) by inserting an image into an inline background style, then used flexbox to ensure the div fills the height of it's parent (we couldn't get height:100%; to work - even when applied it to parent divs up the dom to body or html as suggested by others) - see here: http://jsfiddle.net/cmscss/WLggG/29/

/* HERO STYLES */

/* make hero children expand to fit height of parent becauase height:100%; doesn't work (even applying to all parents all the way up the dom to body or html) */
.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;
}

/* make slide img tag transparent so we can use background-size above */
.hero-image img {
  margin: 0;
  line-height: 0;

  /* IE 8 */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);

  /* modern browsers */
  opacity: 0;
}

But we're having trouble understanding how to get the extra divs required for a slider to inherit flexbox's full height behaviour.

See: http://jsfiddle.net/cmscss/WLggG/27/

Does anyone know how to apply flexbox's layout behaviour to grandchildren so it works like the first JSFiddle?

Any pointers in the right direction would be much appreciated.

DRD DRD · Accepted Answer · 2014-06-25T00:19:05

Declare the children of flexbox to be flexbox also. Additionally, why are you using floating with flexbox and also setting its width directly. The whole idea behind flexbox is that its children grow or shrink from their flex-basis to fill the available space. No floating is necessary, flex-direction sets either horizontal or vertical stacking.

In my book, "Functional CSS," which is still available for free on Amazon, I cover the foundations of flex-box. You are welcome to check it out if interested.

Here's the fiddle: http://jsfiddle.net/fQkyf/3/

CSS code:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

h1 {
    text-align: center;
}

p {
    line-height: 2em;
}

img {
    width: 100%;
    height: auto;
}

.hero {
    background-color: #eeeeee;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;

    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;
}

.hero-image,
    .hero-text {
    -webkit-flex: 1 1 50%;
    flex: 1 1 50%;
}

.hero-text {
    padding: .5em 2em 0;
}

.hero-image {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.hero-image > .hero-gallery {
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
    outline: 1px dotted red;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/* make slide background image stretch to fit */
.hero-slide {
    position: relative;
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
}

.hero-slide:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url("http://placehold.it/1200x1200");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* make slide img tag transparent so we can use background-size above */
.hero-slide img {
    margin: 0;
    line-height: 0;

    /* IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* IE 5-7 */
    filter: alpha(opacity=0);

    /* modern browsers */
    opacity: 0;
}


.hero-text {
    padding: .5em 2em 0;
}

Trouble understanding how to next flexbox full height behaviour

1 Answers