# el-table配合flex布局时不缩小 * 抖音： * B站： 当这个侧边栏收缩再次展开的时候 这个主 区域的内容就会出现横向的滚动条 像这样后来呢我又试了一下 其实只要我们把浏览器拉窄 大家看 他就会出现滚动条 原因是这个表格没有跟着变窄 所以他撑宽了主区域 但是呢如果我现在刷新 大看表格就变窄了 而且这时候我才把浏览器拖拽变宽 大家看表格是跟着变宽的 也就是说：这个表格 会跟着变宽 大家看：但不会跟着变窄 这就很神奇 那难道 我们设置的这个百分之百的宽度 不起作用吗 我们给它设成% 80看一下 大家看：现在宽度是80%我们拉窄 哎80%可以 那我们再试一下侧边栏 大家看：也没问题 90%呢 大家看：也没问题 侧边栏 也没问题 也就是说： 他只有在百分之百的时候有问题 我们用99%试试 大概是可以的哈 但仔细看 这个表格 还是有个慢慢缩小回来的动画 看那为什么会这样呢 说到这里呢 我们要从 el-table 的这个功能说起 他有一个固定表头的功能 那这个功能是怎么实现的呢 我们来检查一下他的元素 也就是说：他为了让上面这个表头能 固定住 做了一个假的表格在这浮动着 然后下边的表格在这滚动 我们把这个删掉试一下 大家看上面就没有了 所以：el-table 为了保持他这个表头 大家看这个表头 和他下面这一列的内容能对得齐 所以他一定要用固定的宽度来设置好 上面的表头有多宽 下面的表格有多宽 包括这两个表格的 每一列的宽度一定要一致 否则就容易出现对不齐的情况 所以呢：即使我们 给这个表格设置了一个百分比的宽度 但在页面上，el-table 还是会把它写一个固定的宽度 我们来检查一下 大家看：现在是556像素 我们把它拉窄一点 看看他一直在变 那这个动作是由 js 来完成的 也就是说：里面这个表格宽度的变化 一定是由 js 监听到了 浏览器尺寸发生变化之后来实现的 好那这是一个关键的结论 那问题就来了 为什么同样是浏览器缩放 他拉宽就可以、拉窄就不行呢？ 这就涉及到了另一个 关于 flex 布局的知识点 我们来看一下这个demo 这里有一个横向的 flex 布局 他们整体 会占用浏览器70%的宽度 所以呢当我拉伸的时候 大家看 主区域会跟着变 比如说主区域被设置了 flex: 1 他会自动收缩和填充满剩余的空间 那么我在里边写点元素大家看一下 假如我写点文字 当我再次拉伸的时候大家看 只要我的黄色区域 一旦小于了文字的宽度以后 他就不会再缩小了 也就是说：这个flex是1的容器 他的宽度是不会小于他 里面内容的宽度 他宽可以 但是缩小的时候他是不会小于里面 内容的宽度 这是默认的情况下 那回过头来我们再说刚才的table 我们把这里边再放一个刚才的table 啊大家看 我们把它在缩小的时候 为什么它不生效呢 （el-table 不缩小） 原因是由于这个el-table 被设置了一个固定宽度 而这个固定的宽度 恰好等于了 他外面这个（flex:1的容器）的宽度 导致了我们再去缩小他的时候 这个黄色的容器不会再缩小了 这样呢就导致里面的 el-table 不会接收到这个浏览器缩放的事件 所以 他就不会去用 js 改变自身的宽度 那怎么解决这个问题呢 我们再回过头来看一下 当他是这些文字的时候 我们给他加一个 overflow: auto 我们再来看一下 缩小 大家看他就会缩小了 但是呢他下边会出现滚动条 当然了我们还可以把它设置成hidden 这样呢他就看不到后面内容了 他也不能滚动了 但是呢他不 他还是会缩小的 那么只要我们设置了这样的 overflow 意味着不管里边的内容有多大 我们外面黄色的容器都会一直缩小 所以即使里面放了一个表格 这个表格也会接收到 浏览器缩放的这么一个事件 他就会自己再去改变他自身的宽度 我们再来试一下 把这个换成 el-table 我们再来看一下 刷新 拉宽没问题 大家注意看拉窄 也没问题了 那还有一种设置方法呢 就是我们把这个 flex:1 的容器 加一个最小宽度也可以解决 大家看 也是可以的 因为只要你想办法让里面的el-table 能接收到浏览器缩放的这么一个事件 他就可以实现这个效果 所以我们再回到 刚才这个问题怎么来解决呢 我们找到他这个main布局 我们给他加一个 overflow 等于 auto 我们再来试一下刷新 大家看这样就解决了 或者我们给他换成 最小宽度 等于0 我们再来试一下 变宽变窄也没问题 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://sunzsh.gitbook.io/xiaoshan.bug/eltable-pei-he-flex-bu-ju-shi-bu-suo-xiao.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.