在项目中时遇到的一个奇葩问题。。。
就是在用v-for时overflow横向滚动失效了 ???
但是像下面这样多复制几次的 overflow-x 就没有问题。。。。
动态渲染 overflow 不支持吗???
<div class="tagList-tag"><span>巴拉巴拉巴拉</span>
<Icon type="ios-close" @click.stop="handleClose" />
</div>
<div class="tagList-tag"><span>巴拉巴拉巴拉</span>
<Icon type="ios-close" @click.stop="handleClose" />
</div>
<div class="tagList-tag"><span>巴拉巴拉巴拉</span>
<Icon type="ios-close" @click.stop="handleClose" />
</div>
<div class="tagList-tag"><span>巴拉巴拉巴拉</span>
<Icon type="ios-close" @click.stop="handleClose" />
</div>
<div class="tagList-tag"><span>巴拉巴拉巴拉</span>
<Icon type="ios-close" @click.stop="handleClose" />
</div>
最终的解决方案就是在父容器中加 white-space: nowrap; 让元素强制不换行就可以了。 希望可以帮到遇到这个问题头疼的小伙伴们
.tagList {
display: flex;
align-items: center;
white-space: nowrap; //
overflow-x: auto;
}