Vertical FlexBox

Flexbox can mean many different things
Is this what you are after
http://jsfiddle.net/GaryC123/6UrwZ/1/

Hover over the middle section

Thanks it works. Can this be done in css or i have to use the javascript for mouse over?

Thanks.

is there any way only the column the mouse moves over on it will expand not the rest of them. As right now all of them expand when i move my mouse to any of the column? Thanks

Shouldn't be, what browser are you using?

firefox. May be that is the problem.

Lets try IE

Yes it works perfect in IE. Browser problem. Thanks.

Works fine in FF26 for me. (FF is what I use for testing)

When I move my mouse over the middle column. The left footer expands too and goes down. Only the footer not the text

<div>

</div>
    <footer>
       <em>&copy; 2014 fdsaflsadfl;jsdlfldsklfdsj </em>
    </footer>
   </body>
</html>
image1.png

Cannot replicate, can you attach your code.

Let's tidy up your code a bit

http://jsfiddle.net/GaryC123/6UrwZ/7/

Mcol.html

So whats wrong with it, apart from you need to change the min-height, that should max-height , don't know how it got lost in the code

http://jsfiddle.net/6UrwZ/8/

When I move the mouse over 2nd or 3rd column. First column also expand but it shows only the footer from the first column.

http://jsfiddle.net/6UrwZ/14/

I don't understand what you mean, it will only expand the div being hovered. Obviously the footer is going to be pushed down

Example which flows over other content
http://jsfiddle.net/GaryC123/6UrwZ/12/

ok thanks. it works.