CSS resize属性问题：左侧方块向右拖动无法挤压右侧方块

当容器内的两个方块设置固定宽高后，使用CSS的resize: both属性实现尺寸调整时，向左拖动左侧方块能正常操作，但向右拖动左侧方块试图占用右侧空间时，调整速度变慢，且右侧方块不会自动缩小。要实现左侧方块向右拖动放大时右侧方块同步缩小的功能，单纯靠CSS无法完成——因为resize仅会修改单个元素的尺寸，不会自动同步兄弟元素的布局。我们需要结合JavaScript来监听尺寸变化，动态调整右侧方块的尺寸。

修改后的完整代码 #

CSS（style.css）

.resizable-square {
    resize: both;
    overflow: auto;
    border: 2px solid #000;
    box-sizing: border-box;
}

.container-square {
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 替换space-around，避免自动分配额外空白 */
    background-color: #90EE90;
    gap: 10px; /* 用gap管理方块间距，替代margin更易计算 */
    padding: 10px; /* 容器内边距，避免方块贴边 */
}

.inner-square {
    min-width: 50px; /* 设置最小宽度，防止缩至不可用 */
    min-height: 50px;
    width: 100px;
    height: 100px;
    background-color: #6495ED;
    margin: 0; /* 移除margin，改用容器gap和padding控制间距 */
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resizable Squares</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container-square">
        <div class="resizable-square inner-square" id="leftSquare"></div>
        <div class="resizable-square inner-square" id="rightSquare"></div>
    </div>

    <script>
        const leftSquare = document.getElementById('leftSquare');
        const rightSquare = document.getElementById('rightSquare');
        const container = document.querySelector('.container-square');

        // 计算容器内可分配的总宽度（扣除padding、gap等）
        function getAvailableWidth() {
            const containerStyle = getComputedStyle(container);
            const containerWidth = parseInt(containerStyle.width);
            const paddingLeft = parseInt(containerStyle.paddingLeft);
            const paddingRight = parseInt(containerStyle.paddingRight);
            const gap = parseInt(containerStyle.gap);
            return containerWidth - paddingLeft - paddingRight - gap;
        }

        // 同步右侧方块的尺寸
        function syncRightSquareSize() {
            const availableWidth = getAvailableWidth();
            const leftWidth = parseInt(getComputedStyle(leftSquare).width);
            // 右侧宽度 = 容器可用总宽度 - 左侧方块宽度
            rightSquare.style.width = `${availableWidth - leftWidth}px`;
            
            // 可选：同步高度（不需要可删除）
            const leftHeight = parseInt(getComputedStyle(leftSquare).height);
            rightSquare.style.height = `${leftHeight}px`;
        }

        // 用ResizeObserver监听左侧方块尺寸变化，比resize事件更可靠
        const resizeObserver = new ResizeObserver(syncRightSquareSize);
        resizeObserver.observe(leftSquare);

        // 页面加载时初始化一次尺寸
        syncRightSquareSize();
    </script>
</body>
</html>

核心逻辑说明 #

1. 布局优化：用gap和padding替代margin，消除布局计算中的不确定性；设置min-width防止方块缩至无法操作。
2. 尺寸监听：使用ResizeObserverAPI，能精准捕捉左侧方块的尺寸变化（比传统的resize事件更稳定，支持所有触发尺寸变化的场景）。
3. 动态计算：每次左侧方块尺寸改变时，计算容器内的可用空间，将剩余宽度分配给右侧方块，实现联动缩放。

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