Css Ionic 4选项卡栏溢出

我想要这样的布局：

但我明白了：

我的按钮被标签栏切断了。 我如何解决这个问题？
我尝试为所有标签添加“溢出：可见”，但它不起作用。
我的模板：

。放置按钮包装{
位置：绝对位置；
底部：20px；
}

...
...

我修复了只在我的离子标签上添加“包含：无”的问题。

如果在离子iabs上添加“包含：无”无效，那么在离子标签栏上添加“包含：无”

ion-tabs { contain: none; }

或

这段代码对我很有用（我知道，也许这不是最干净的解决方案，但我没有找到其他方法）

我创建了一个递归方法，在此方法中尝试获取所有选项卡按钮，如果没有，我使用setTimeout调用该方法（setTimeout是避免填充堆栈所必需的），在找到所有按钮后，我访问了每个人的阴影根，并更改了溢出值：

  setStyle() {
    const all = document.querySelectorAll('.tab-has-icon');

    if(all.length === 0) {
      setTimeout(() => {
        this.setStyle();
      }, 0);
      return;
    }

    all.forEach(el => {
      el.shadowRoot.querySelector('.button-native').setAttribute('style','overflow: inherit')
    });
  }

---

我将所有答案混合在一起：

// as mentioned about
ion-tabs { contain: none; }
ion-tab-bar { contain: none }

 // a wrapper for the position
.buttonWrapper {
  position: absolute;
  bottom: 20px;
}

// for the overflow
ion-tab-button::part(native){
   overflow: visible;
}

如果不起作用，请在css的离子选项卡栏中添加“包含：无”

// as mentioned about
ion-tabs { contain: none; }
ion-tab-bar { contain: none }

 // a wrapper for the position
.buttonWrapper {
  position: absolute;
  bottom: 20px;
}

// for the overflow
ion-tab-button::part(native){
   overflow: visible;
}