css左右布局，左侧主要面板，右侧次要面板，通过改变右侧width宽度来实现隐藏时，如何不让右侧内容受到挤压？

Z时代
2024-02-27
分类：IT

期望效果，右侧面板 width 慢慢减少至0，从而实现隐藏效果，但是不希望右侧内容在width减小过程中收到挤压，非常影响美观，改如何操作呢？

注：右侧结构内容比较复杂，所以最好不需要从内部结构入手，只需要修改右侧容最好。

vue 代码如下：

<template>
  <div class="about">
    <div class="lft">
      <button @click="() => isShowRight = !isShowRight">显示/隐藏</button>
    </div>
    <div class="rht" :class="!isShowRight ? 'closed' : ''">
      <div>隐藏右侧区块后，这些内容怎么不隐藏，还会受到挤压？</div>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
      isShowRight: true
    }
  },
  methods: {
  }
}
</script>
<style lang='css' scoped>
.about{
  height: 100%;
  width: 100%;
  display: flex;
}
.lft, .rht{
  height: 100%;
}
.lft{
  flex: 1;
  background: #e3e3e3;
}
.rht{
  transition: all 3s;
  width: 400px;
  background: rgb(201, 186, 186);
}
.closed{
  overflow: hidden;
  width: 0;
}
</style>

问题解决了：

搞定了，右侧三层div可以做到。

<div class="detail-area" :class="!isShowDetailPanel ? 'closed' : ''">
    <div class="detail-content">
        <div class="canvas-panel-wrapper">
        </div>
    </div></div>

.detail-area{
  width: 350px;
  height: 100%;
  background: $bg-block;
  transition: all $delay;
  margin-left: 2px;
  box-sizing: border-box;
  display: flex;
  position: relative;
  &.closed{
    width: 0;
  }
  .detail-content{
    padding: 10px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .canvas-panel-wrapper{
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
    position: absolute;
    width: 350px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}