jQuery UI - Изменение размера элемента A не делает соседний элемент B меньше?

Question

Я использую jquery-ui-1.12.1.

У меня есть 3 области, расположенные на экране горизонтально:

<div class="grid-container">
    <div class="grid-item" id="menu">
        <p>Menu</p>
    </div>
    <div class="grid-item" id="browser">
        <!--Canvas is added in here-->
    </div>
    <div class="grid-item" id="controls">
        <p>Controls</p>
    </div>
</div>

Когда я изменяю размер #menu div, чтобы он стал шире, я хочу, чтобы #browser div ширина стала меньше, но она осталась той же ширины.

$(document).ready(function(){
    $('#menu').resizable({
        handles: 'e',
        minWidth: 100,
        stop: function( event, ui ) { 
            console.log("Done resizing");
            console.log( "Browser width: " + $('#browser').width() );
        }
    });
});

div #browser остается той же ширины, но я хочу, чтобы он уменьшался по мере увеличения #menu.

Answer 1

Я исправил это с небольшим количеством ручного кода:

    stop: function( event, ui ) {
        var oldWidth = ui.originalSize.width;
        var newWidth = ui.size.width;
        var difference = newWidth - oldWidth;
        var browserElem = $('#browser');
        var currentBrowserWidth = browserElem.width();
        var newBrowserWidth = currentBrowserWidth - difference;
        browserElem.width(newBrowserWidth);
    }

Однако, в моем случае, div браузера содержит холст, на котором выполняется ThreeJS, а изменение размера div браузера приводит к странному поведению, поэтому я, скорее, сохраню его в прежнем состоянии.