Javascript 通过拖动使flexbox边栏div宽度增加/减少

我有一个简单的3列布局，包括左侧边栏、内容区和右侧边栏。我使用flexbox来处理宽度。我希望这样，当用户拖动左侧边栏的右边框时，可以调整div的大小。我更喜欢css解决方案，如果它有意义的话，但我对javascript或jquery开放。无论哪种方法对我来说最容易理解：）

这里有一个可能的解决方案，使用css

resize

属性（单击

运行代码片段查看结果）

注:


调整大小处理程序位于左侧栏的右下角
并非所有浏览器都完全支持resize属性（约74%请参阅）
调整大小处理程序的样式仍然有限（请参见此）


.container{
高度：500px；
显示器：flex；
}
.左侧边栏{
显示器：flex；
弯曲方向：行；
背景色：#364F6B；
颜色：#fff；
/*这是用来调整大小的*/
溢出：滚动；
调整大小：水平；
}
.中央咏叹调{
背景色：#3FC1C9；
柔性生长：2；
}
.右侧边栏{
背景色：#FC5185；
}
.左侧边栏、.右侧边栏、.中间咏叹调{
填充：8px；
}

左侧边栏-调整我的大小
中心咏叹调
右侧边栏
请花些时间阅读帮助页面，尤其是命名的部分，更重要的是，请阅读。您可能还想了解。