> For the complete documentation index, see [llms.txt](https://sunzsh.gitbook.io/xiaoshan.bug/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sunzsh.gitbook.io/xiaoshan.bug/flex-chang-jian-de-yi-ge-bug-bu-fen-qu-yu-wu-fa-chu-fa-popover-guan-bi.md).

# flex常见的一个bug：部分区域无法触发popover关闭

* 抖音：<https://v.douyin.com/SaecVEJ/>
* B站：<https://www.bilibili.com/video/BV1bx4y1T7et/>

> **demo预览：**
>
> <https://sunzsh.github.io/vue-demos/#/tagsel-notclose>
>
> **代码：**
>
> <https://github.com/sunzsh/vue-el-demo/blob/master/src/views/tagsel-notclose.vue>

今天这个BUG不起眼但是很好玩哈

大家看这里有一个标签选择的组件

然后呢他点击页面任何一个地方

是可以自动关闭的

但唯独是点这，大家看没有效果

其实原因也很简单

就是这个组件啊

他最外层的这个容器比较宽

大家看到这个位置

那为什么会这样呢

原因是啊

上面这个标签两个字和下边这个组件

现在采用的是纵向Flex布局实现的

大家看这里

但是呢由于flex布局

它默认的对齐方式采用的是这个stretch

默认的横向flex布局

里边的元素是等高的

而对于咱们这种纵向的flex布局

它里边的元素就是等宽的

所以解决这个问题也很简单

我们要把它改成这个flex-start就可以了

所以呢在这我们在这加一个

align-items等于

flex-start

好我们再来看一下它的宽度

大家看 标签是这么宽

下边组件这么宽

我们再来验证一下这个bug

张开点这

这样就解决了