How to position inside flex-box?

Question

I am using flex box and want to align button to the bottom.

I am using position absolute and bottom: 0, but browser is ignoring it.

<ul class="box">
   <li><div>this has <br> more <br> <button>one</button></div></li>
   <li><div>this has <br> more <br> content <br> <button>one</button></div></li>    
   <li>d<div><button>one</button></div></li>
</ul>


ul {
    /* basic styling */
    width: 100%;
    height: 100px;
    border: 1px solid #555;

    /* flexbox setup */
    display: -webkit-box;
    -webkit-box-orient: horizontal;

    display: -moz-box;
    -moz-box-orient: horizontal;

    display: box;
    box-orient: horizontal;
}

.box > li {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    margin: 0 1px;
    padding-bottom: 20px;
    border-bottom: 20px solid red;
    position: relative;
}
button {
    position: absolute;   
    bottom: 0;

}
/* our colors */
.box > li:nth-child(1){ background : #FCC; }
.box > li:nth-child(2){ background : #CFC; }
.box > li:nth-child(3){ background : #CCF; }

I can use float and not use flex-box, but I want to see if there is a solution for this using flex-box.

demo here: http://jsfiddle.net/NJAAa/

Answer 1

Working WebKit version: http://jsfiddle.net/LLtmE/

In short: you need to put your text context in a separate div; make each li a flexbox and set box-orient to vertical. And remove all that absolute/relative positioning - it's no longer necessary.