宽度自适应问题

[wanghongtao766]

可复现的链接：

https://cyfrmn.csb.app/

问题描述与截图：

点击展开，表格宽度缓慢缩小，不是被右侧盒子一下挤过去； 若将表格相关代码注释，就可以一下挤过去。 代码如下：

<template>
  <div class="myApp">
    <div class="myTable">
      <vxe-toolbar>
        <template #buttons>
          <vxe-button @click="allAlign = 'left'">居左</vxe-button>
          <vxe-button @click="allAlign = 'center'">居中</vxe-button>
          <vxe-button @click="allAlign = 'right'">居右</vxe-button>
        </template>
      </vxe-toolbar>

      <vxe-table auto-resize :align="allAlign" :data="tableData">
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="name" title="Name"></vxe-column>
        <vxe-column field="sex" title="Sex"></vxe-column>
        <vxe-column field="age" title="Age"></vxe-column>
      </vxe-table>
    </div>
    <div class="showTemp" @click="changeShow" v-if="!isShow">展开</div>
    <div class="templateContent" v-else>
      <!-- v-else -->
      <span>模板内容</span>
      <div class="btn" @click="changeShow">折叠</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const allAlign = ref(null);
const tableData = ref([
  {
    id: 10001,
    name: "Test1",
    role: "Develop",
    sex: "Man",
    age: 28,
    address: "test abc",
  },
  {
    id: 10002,
    name: "Test2",
    role: "Test",
    sex: "Women",
    age: 22,
    address: "Guangzhou",
  },
  {
    id: 10003,
    name: "Test3",
    role: "PM",
    sex: "Man",
    age: 32,
    address: "Shanghai",
  },
  {
    id: 10004,
    name: "Test4",
    role: "Designer",
    sex: "Women",
    age: 24,
    address: "Shanghai",
  },
]);

const isShow = ref(false);

const changeShow = () => {
  isShow.value = !isShow.value;
};
</script>

<style>
.myApp {
  display: flex;
}
.myTable {
  flex: 1;
  background-color: pink;
}
.showTemp {
  width: 50px;
  height: 200px;
  border-radius: 15px;
  background-color: #d0eeff;
  color: #046fff;
  margin-left: 20px;
  cursor: pointer;
}
.templateContent {
  background-color: purple;
  width: 400px;
  height: 300px;
  margin-left: 20px;
  position: relative;
}
.btn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: pink;
  height: 50px;
  width: 30px;
  cursor: pointer;
}
</style>

期望的结果：

No response

操作系统：

Windows 11 家庭中文版

浏览器版本：

Microsoft Edge 120.0.2210.61

vue 版本：

3.3.4

vxe-table 版本：

4.5.14

[Cyyyy2]

我也出现了你这个问题

[Cyyyy2]

我已经解决了 就是盒子不能用flex:1 你改成百分比试试

[transtone]

我已经解决了 就是盒子不能用flex:1 你改成百分比试试

不能叫解决，只能叫绕开。 但 flex 自适应布局下，使用表格是很常见的。

[bijinfeng]

给 flex:1 的容器添加 overflow: hidden 就可以了