css flexbox equal height columns not working

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.

You just have your browser prefixes mixed up should be 'display: -webkit-flex;' etc. Have a play with the-echoplex.net/flexyboxes — r8n5n
@Adi: is this a browser specific issue? this works for me in Chrome 33 (see i.imgur.com/L7pzZpH.png) and Firefox 27 (see i.imgur.com/uVU4H5Z.png) — Adrien Be

cimmanon cimmanon · Accepted Answer · 2013-04-19T12:33:17

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

css flexbox equal height columns not working

1 Answers