css - Trouble understanding how to next flexbox full height behaviour -

css - Trouble understanding how to next flexbox full height behaviour -

we have layout we'd slider image fill height of it's parent.

we've achieved static image illustration (no slider) inserting image inline background style, used flexbox ensure div fills height of it's parent (we couldn't height:100%; work - when applied parent divs dom body or html suggested others) - see here: http://jsfiddle.net/cmscss/wlggg/29/

/* hero styles */ /* create hero children expand fit height of parent becauase height:100%; doesn't work (even applying parents way dom 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 */ /* create inline hero image stretch 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; } /* create slide img tag transparent can utilize 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 problem understanding how divs required slider inherit flexbox's total height behaviour.

see: http://jsfiddle.net/cmscss/wlggg/27/

does know how apply flexbox's layout behaviour grandchildren works first jsfiddle?

any pointers in right direction much appreciated.

declare children of flexbox flexbox also. additionally, why using floating flexbox , setting width directly. whole thought behind flexbox children grow or shrink flex-basis fill available space. no floating necessary, flex-direction sets either horizontal or vertical stacking.

in book, "functional css," still available free on amazon, cover foundations of flex-box. welcome check out if interested.

here's 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; } /* create slide background image stretch 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%; } /* create slide img tag transparent can utilize 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; }

css flexbox