有趣且重要的css知识合集（1）纯css实现div左右拖拽效果

目前我看主流的都是用js来实现div拖拽效果，不过我个人觉得一直监听拖拽，会耗费很大的性能，毕竟监听盒子的宽高这些属性，都会触发浏览器的回流，并且我看了很多博客，他们是能用css实现div左右拖拽效果，但是并没有一个最小或者最大宽度的限制，导致直接将左右子div压扁。

蓝色虚线是当鼠标移上去的时候，显示的拖拽线

大多数博客的拖拽

 

这种拖拽会将左div或者右div直接压扁，但是我肯定不想做成这样子，我想左div有最大和最小宽度限制，然后右div是自适应宽度

我实现的拖拽

左最小宽度，我设置的300px

 

左最大宽度，我设置的600px

 

 代码如下

<template>
  <div class="company-manager">
    <div class="left">
      <div class="resize-bar"></div>
      <div class="resize-line"></div>
      <div class="resize-save">
        左侧的内容，左侧的内容，左侧的内容，左侧的内容
      </div>
    </div>
    <div class="right">
      右侧的内容，右侧的内容，右侧的内容，右侧的内容
    </div>
  </div>
</template>

<style scoped lang='scss'>
  .company-manager {
    display: flex;
    overflow: hidden;
    .left {
      height: 400px;
      background-color: #fff;
      position: relative;
      .resize-save {
        position: absolute;
        top: 0;
        right: 5px;
        bottom: 0;
        left: 0;
        padding: 16px;
        overflow-x: hidden;
      }
      .resize-bar {
        height: inherit;
        resize: horizontal;
        opacity: 0;
        cursor: ew-resize;
        width: 300px;
        min-width: 300px; /* 最小宽度 300px */
        max-width: 600px; /* 最大宽度 600px */
        overflow: scroll;
      }
      .resize-line {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        border-right: 2px solid #eee;
        border-left: 1px solid #bbb;
        pointer-events: none;
      }
      .resize-bar:hover ~ .resize-line,
      .resize-bar:active ~ .resize-line {
        border-left: 1px dashed skyblue;
      }
      .resize-bar::-webkit-scrollbar {
        width: 300px;
        height: inherit;
      }
    }
    .right {
      height: 400px;
      padding: 16px;
      flex: 1 1 auto;
      background-color: #eee;
      box-sizing: border-box;
      overflow: hidden;
    }
  }
</style>