Как расположить внутри гибкого блока?

Я использую гибкий блок и хочу выровнять кнопку по низу.

Я использую абсолютную позицию и нижнюю часть: 0, но браузер игнорирует ее.

   
this has 
 more 
 one
   
this has 
 more 
 content 
 one
    
   
d
one



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

Я могу использовать float и не использовать flex-box, но я хочу посмотреть, есть ли решение этой проблемы с использованием flex-box.

здесь: http://jsfiddle.net/NJAAa/