让Tab组件的content局部滚动

实现局部滚动有一种非常简单的方法，就是利用父元素display: flex; flex-direction: column;，加上某个子元素的flex: 1; overflow: auto;，就可以让该子元素的内容局部滚动起来，有时候为了让其他子元素不被挤扁，还需要给其他子元素设置flex: 0;。但是，这个方案如果套用在Tab组件上，就有点麻烦：

组件代码举例：

<van-tabs v-model="active" class="tabs-container">
  <van-tab title="标签 1" class="tabs-content">内容 1</van-tab>
  <van-tab title="标签 2" class="tabs-content">内容 2</van-tab>
  <van-tab title="标签 3" class="tabs-content">内容 3</van-tab>
  <van-tab title="标签 4" class="tabs-content">内容 4</van-tab>
</van-tabs>

生成的DOM是：

image.png

可以看出，我希望给van-tabs__wrap和van-tabs__content设class，但是我的class却设不到它俩身上。

解决方案：使用这段scss，并且给组件根元素加上class="flex-van-tabs"即可。

<style lang="scss">
.flex-van-tabs {
  display: flex;
  flex-direction: column;

  > .van-tabs__wrap {
    flex: none;
  }
  > .van-tabs__content {
    flex: 1;
    overflow: auto;
  }
}
</style>