How to position inside flex-box? - css

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.

Answer 2

The reason is the flex container has no specific width or height,since its flexible with its contents.
To ensure my statement, try with left or top, it will react for your data. If you try with right or bottom, you cant see the reaction. Since the flex container box original width / height is very less.

Answer 3

Check this on codepen. I hope this help and that is not late:)
ul {
margin: 0;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 80%;
margin: 10% auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #b2b2b2;
box-shadow: 2px 2px 3px #666666;
}
ul > li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-preferred-size: 33.33%;
flex-basis: 33.33%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
ul > li > button {
margin: 20px;
padding: 5px 15px;
cursor: pointer;
}
ul > li > button:hover {
color: whitesmoke;
background-color: maroon;
}
/* our colors */
ul > li:nth-child(1) {
background: #000000;
}
ul > li:nth-child(2) {
background: #191919;
}
ul > li:nth-child(3) {
background: #323232;
}
And this can be helpfull....