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

张开点这

这样就解决了