# 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

张开点这

这样就解决了


---

# 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/flex-chang-jian-de-yi-ge-bug-bu-fen-qu-yu-wu-fa-chu-fa-popover-guan-bi.md?ask=<question>
```

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.