css flexbox equal height columns not working - css

Question

I am trying to get css3 flexbox working (for the first time) to make equal height columns (for those browsers that support it).
I have seen various examples across the web but I cant get any to work.
Here is my code (followed by a jsfiddle link)
<div>
<span><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p></span>
<span>col2</span>
<span>col3</span>
</div>
div { background:red; float:left;
-webkit-display:flex;
-moz-display:flex;
display:flex;
}
span { display:block; background:yellow; float:left; width:100px; margin:0 10px;
-webkit-flex:1;
-moz-flex:1;
flex:1;
}
http://jsfiddle.net/38kbV/
Any pointers would be greatly appreciated.

Answer 1

The float is causing the entire thing to fall apart in Firefox. If you need it to appear inline with other content, you'll need to use the inline display property instead (inline-flex, inline-flexbox, inline-box).
When you're following the modern Flexbox draft, you need to stick with all of the properties that belong to that draft. If you try to mix and match, they won't work as expected. There are 3 different drafts that have been implemented in various browsers, each with different property names and values (see: https://gist.github.com/cimmanon/727c9d558b374d27c5b6)
http://tinker.io/11122/2
div {
background: red;
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
span {
display: block;
background: yellow;
float: left;
width: 100px;
margin: 0 10px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}