Vertical FlexBox

What changes i need to use a vertical flexbox and expand vertically with no gaps between the boxes. When the mouse hovers over, the flexbox expands and the overflow text is

revealed. Thanks
MulticolumnLayout.html
mustish1Asked:
Who is Participating?
 
GaryCommented:
http://jsfiddle.net/GaryC123/6UrwZ/3/

I've changed your css a bit.
0
 
GaryCommented:
Flexbox can mean many different things
Is this what you are after
http://jsfiddle.net/GaryC123/6UrwZ/1/

Hover over the middle section
0
 
mustish1Author Commented:
Thanks it works. Can this be done in css or i have to use the javascript for mouse over?
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
mustish1Author Commented:
Thanks.
0
 
mustish1Author Commented:
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
0
 
GaryCommented:
Shouldn't be, what browser are you using?
0
 
mustish1Author Commented:
firefox. May be that is the problem.
0
 
mustish1Author Commented:
Lets try IE
0
 
mustish1Author Commented:
Yes it works perfect in IE. Browser problem. Thanks.
0
 
GaryCommented:
Works fine in FF26 for me. (FF is what I use for testing)
0
 
mustish1Author Commented:
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
0
 
GaryCommented:
Cannot replicate, can you attach your code.
0
 
GaryCommented:
Let's tidy up your code a bit

http://jsfiddle.net/GaryC123/6UrwZ/7/
0
 
mustish1Author Commented:
0
 
GaryCommented:
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/
0
 
mustish1Author Commented:
When I move the mouse over 2nd or 3rd column. First column also expand but it shows only the footer from the first column.
0
 
GaryCommented:
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/
0
 
mustish1Author Commented:
ok thanks. it works.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.