能否用CSS resize属性调整Flex布局列宽度？拖动无响应求助

需求是实现两列铺满页面的布局，支持拖动左侧列调整宽度，右侧列自动收缩。添加box-sizing: border-box后，左侧列的resize控件仅光标变化，拖动无效果。

原代码 #

CSS

* {
    box-sizing: border-box;
}

.flexContainer {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100vh;
    border-style: none;
}

div.divBlock {
    display: inline-block;
    height: 100%;
    vertical-align: top;
    border-style: none;
}

#left {
    flex-basis: 30%;
    resize: horizontal;
    overflow: auto;
    border-right-style: solid;
    border-right-width: 10px;
    flex-grow: 0;
    flex-shrink: 0;
}

#right {
    flex-grow: 1;
    flex-shrink: 1;
}

body {
    margin: 0
}

HTML

<div class="flexContainer">
  <div id="left" class="divBlock"></div>
  <div id="right" class="divBlock"></div>
</div>

问题原因 #

左侧列设置了flex-shrink: 0和flex-grow: 0，并通过flex-basis: 30%固定宽度。在Flex布局中，flex-basis的优先级高于元素的width属性，而resize拖动改变的是元素的width，因此拖动操作无法影响实际显示的宽度。

解决方案 #

修改左侧列的Flex属性，让其宽度由width控制，而非flex-basis，同时保持Flex布局的自适应逻辑：

修改后的CSS

* {
    box-sizing: border-box;
}

.flexContainer {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100vh;
    border-style: none;
}

div.divBlock {
    height: 100%;
    border-style: none;
}

#left {
    width: 30%;
    resize: horizontal;
    overflow: auto;
    border-right: 10px solid;
    flex: 0 0 auto; /* 不放大不缩小，宽度由width决定 */
    min-width: 100px; /* 可选：设置最小宽度防止拖得太窄 */
}

#right {
    flex-grow: 1;
    flex-shrink: 1;
}

body {
    margin: 0
}

修改说明

1. 移除左侧列的flex-basis，改用width: 30%作为初始宽度
2. 设置flex: 0 0 auto，让Flex布局尊重元素的width设置，同时禁止自动放大缩小
3. 可选添加min-width限制左侧列的最小宽度，避免拖动过窄影响使用
4. 移除了多余的display: inline-block和vertical-align: top，Flex子项无需这些属性

这样修改后，拖动左侧列的resize控件就能正常调整宽度，右侧列会自动填充剩余空间。

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