在父div内调整子div的大小时如何隐藏div

Question

I have some divs inside a container, and each child div is jQuery resizable that handles e resize.

My problem is when I try to resize the first child, the others jump outside the content div or outside when they reach the limits of their parent,

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

here you can see a working example.

What I need is, when resize any child none of them jump outside the parent or to a new line and if the parent reach the max-width hide the overflow.

Any help will be great! Thanks in advance.

Answer 1

The container is jumping to the new line because you set a range of 50-100px for the height in the css.

Change

max-height: 200px;

To

max-height: 50px;

on .container .

Here is a fiddle: http://jsfiddle.net/vS8vu/5/