jQuery UI Resizable无法随光标正常缩放问题排查

当可缩放元素的父容器设置了display: flex时，使用jQuery UI Resizable拖动调整大小会出现实际变化尺寸远小于拖动距离的问题——比如拖动光标移动1000px，元素仅放大400px左右。

问题原因 #

jQuery UI Resizable通过直接修改元素的width/height属性来调整尺寸，但flex布局下，兄弟元素的flex属性会自动分配容器剩余空间，这会和Resizable的尺寸计算逻辑冲突，导致缩放时的尺寸偏差。

解决方案 #

通过调整flex布局的属性，让Resizable的尺寸设置能正常生效：

1. 给可缩放的左侧面板添加flex-shrink: 0，禁止flex布局压缩它的宽度，确保Resizable设置的宽度完全生效：

#leftPanel {
    width: 300px;
    overflow: scroll;
    flex-direction: column;
    display: flex;
    position: relative;
    background-color: #ddffff;
    flex-shrink: 0; /* 新增：禁止flex压缩 */
}

2. 修改右侧面板的样式，用flex: 1替代width: 100%，让它自动占据容器剩余空间，适配左侧面板的缩放：

#rightPanel {
    background-color: #ffddff;
    flex: 1; /* 替换width: 100%，自动占据剩余空间 */
    display: flex;
    flex-direction: column;
}

修改后的完整代码 #

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
    main {
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    #containerParent {
        flex: 1;
        overflow: hidden;
    }

    #panelContainer {
        width: 100vw;
        display: flex;
        height: 100%;
    }

    #leftPanel {
        width: 300px;
        overflow: scroll;
        flex-direction: column;
        display: flex;
        position: relative;
        background-color: #ddffff;
        flex-shrink: 0;
    }

    #results {
        flex: 1 1 0;
        flex-direction: column;
    }

    #rightPanel {
        background-color: #ffddff;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
</style>
</head>
<body>
    <main>
        <nav>
            nav
        </nav>
        <div id="containerParent">
            <div id="panelContainer">
                <div id="leftPanel">
                    <button class="btn btn-primary" type="button" id="populate">button</button>
                    <div id="results">
                    </div>
                </div>
                <div id="rightPanel">
                </div>
            </div>
        </div>
    </main>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

    <script>
        $("#leftPanel").resizable({ handles: "e" });
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者WushuDrew