css， resize 拖拉宽度

效果如下：

可直接复制预览查看属性值:
关键样式属性： resize: horizontal; overflow-x: auto;

  
  
  
  


  

    

      

      

      

        
面朝大海，春暖花开
        从明天起，做一个幸福的人 

        喂马、劈柴，周游世界 

        从明天起，关心粮食和蔬菜 

        我有一所房子，面朝大海，春暖花开 

        从明天起，和每一个亲人通信 

        告诉他们我的幸福 

        那幸福的闪电告诉我的 

        我将告诉每一个人 

        给每一条河每一座山取一个温暖的名字 

        陌生人，我也为你祝福 

        愿你有一个灿烂的前程 

        愿你有情人终成眷属 

        愿你在尘世获得幸福 

        我只愿面朝大海，春暖花开 

      
    
    

  

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
}
.box {
  width: 100%;
  display: flex;
  height: 100%;
}
.left {
  position: relative;
  margin-right: 16px;
  height: 100%;
  border: 1px solid red;
}

.left .resize {
  resize: horizontal;
  overflow-x: auto;
  height: calc(50% + 16px);
  min-width: 400px;
  opacity: 0;
  width: calc(100vw - 100px - 16px - 4px);
  max-width: calc(100vw - 100px - 16px - 4px);
  transform: translateX(12px);
  border: 1px solid orange;
}

.left .content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  overflow: auto;
  line-height: 36px;
  padding: 50px;
}

.left .resizeIcon {
  position: absolute;
  right: -16px;
  font-size: 18px;
  top: 50%;
}


.right {
  border: 1px solid blue;
  min-width: 100px;
  height: 100%;
  flex: 1;
}