这个3窗格分割器出了点问题

Question

我正在尝试调整容器内的3个窗格，调整大小时，它们不应超过容器的宽度（不要离开它）。
但是在这个片段http://jsfiddle.net/KXsrd/中，当我调整第二个元素时，它会成功减少下一个元素，或者根据方向增加。但有时候它会导致下一个兄弟掉到容器下面，虽然当我扩展它时，下一个兄弟会减小它的大小，它会一直“震动”......

这是主要功能：

   $(function () {

        $('.col').each(function (e, u) {
            $(u).data({ow: $(u).width()});
        })
        $(".col").resizable(
                {
                    handles: 'e',
                    start: function (e) {

                    },
                    resize: function (e, ui) {

                        var el = ui.element;
                        var parent = el.parent();
                        var next = el.next();
                        var siblings = el.siblings();
                        var siblingsWidth = (function () {
                            var totalWidth = 0;
                            _.each(siblings, function (el) {
                                totalWidth += $(el).width();
                            });
                            return totalWidth;
                        })();
                        var currentSize = ui.size;

                        if (currentSize.width > $(el).data('ow')) {
                            next.css({width: '-=' + (currentSize.width - $(el).data('ow'))});
                        } else {
                            next.css({width: '+=' + (  $(el).data('ow') - currentSize.width )});
                        }
                        if (currentSize.width + siblingsWidth >= $(parent).width()) {

                            $(el).width($(parent).width() - siblingsWidth)

                        }
                        $(el).data({ow: currentSize.width});

                    },
                    stop: function (e, ui) {

                    }
                });
    });

任何帮助将不胜感激.. （PS。我为可调整大小的窗格尝试了很多插件。但它们只能在2个窗格上工作）