html - How to position a div on bottom of box flex container -

i trying position div on bottom of each child next each other in 1 row , expanded parents height.

my html looks this:

<div class="parent">   <div class="child">     <div class="bottom">footer</div>   </div>   <div class="child">     <div class="bottom">footer</div>   </div>   <div class="child">     <div class="bottom">footer</div>   </div> </div> 

this have come with: http://jsfiddle.net/xtvdq/

but can not position div.bottom on bottom of div.child.

is there way accomplish this? if remove box related css works expected, lose height expansion parent container.

so not easy: javascript not option here.

change css following

.parent {     position:relative;     display:-moz-box;     display:-webkit-box;     display:box;     -moz-box-orient: horizontal;     -webkit-box-orient: horizontal;     box-orient: horizontal;     width:100%;     min-height:200px; } .parent .child {     background:red;     -moz-box-flex: 1;     -webkit-box-flex: 1;     box-flex: 1;     border:2px solid green; } .parent div + div {     margin-left:10px; } .parent .child .bottom {     position:absolute;     bottom: 0;     border:2px solid blue; } 

http://jsfiddle.net/isherwood/xtvdq/11/