javascript - How to hide divs when resizing child divs inside a parent div -

javascript - How to hide divs when resizing child divs inside a parent div -

i have divs within container, , each kid div jquery resizable handles e resize.

my problem when seek resize first child, others jump outside content div or outside when reach limits of parent,

<div class="container"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>

here can see working example.

what need is, when resize kid none of them jump outside parent or new line , if parent reach max-width hide overflow.

any help great! in advance.

the container jumping new line because set range of 50-100px height in css.

change

max-height: 200px;

to

max-height: 50px;

on .container.

here fiddle: http://jsfiddle.net/vs8vu/5/

javascript jquery html css