Trying to align a button at the bottom using flexbox, but running into issues.
Tried using position:absolute and bottom: 0, but it seems that the browser is not recognizing it correctly.
<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; }
Considering using float as an alternative to flexbox, but still exploring solutions with flexbox.
Check out the demo here: http://jsfiddle.net/NJAAa/