css3 - Multiply bested DIV, inner div full height with flexbox only - possible? -

i have complex layout in have div generated javascript dynamic height, called ".outer" . div has nested divs, leading div called ".target". need target div @ ".outers" height. , don't want address inner divs since varying markup generated js framework.

i not want set height via js, can not set position absolute nor relative in ".outer"

html:

<div class="outer">   <div class="inner">     <div class="anotherinner">       <div class="target">         div should outer's height no matter how many divs between target , outer ".inner"       </div>     </div>   </div> </div> 

css:

body {   background: #000; }  .outer {   background: #333;   height: 500px;  /* not pixel value, example*/   display: flex;   flex-direction: column;   flex-wrap: wrap;   justify-content: flex-start;   align-content: stretch;   align-items: stretch; }  .inner {   background: #555; }  .target {   background: #777;   order: 0;   flex: 1 1 auto;   align-self: auto; } 

example:

http://codepen.io/anon/pen/akwwzk?editors=1100

the possible way in flexbox address .inner div's in css adding display: flex; them.

i've created working example here: http://codepen.io/mattpark22/pen/rlwwzp

to '.inner' add:

display: flex; 

to '.target' add:

height: 100%; 

to '.outer' change, flex-direction to:

flex-direction: row; 

my codepen example cleans css isn't required.