我不了解Ionic 4，但在Ionic 5上，当您在控制台上调试时，解决方案如下：

ion-toolbar {
    contain: none;

    .toolbar-container {
        overflow: visible;
        contain: none;
    }
}

但是，.toolbar-container是<ion-toolbar>组件的shadow dom中的一个元素，它的overflow和contain属性不是css变量，并且这个元素上也没有part attribute，所以实际上没有办法覆盖这些属性。
我正在考虑使用这个包，但是对我来说，使用js和timeout来设置一个非常简单的样式似乎有些过头了......：https://www.npmjs.com/package/shadow-dom-inject-styles

当我不得不在标题下做一个搜索栏溢出时（设计的事情），我遇到了类似的问题。我挣扎了一会儿，当我把搜索栏放在工具栏外面并给它绝对位置时，它突然出现了：

<ion-head>
  <ion-toolbar>
     <!-- My stuff here -->
  </ion-toolbar>

  <ion-searchbar></ion-searchbar>
<ion-header>

我的CSS看起来像这样：

ion-toolbar {
  display: flex; // I need this for something else, but maybe has an influence
}

ion-searchbar {
  padding: 0 1em .5em 1em;
  transform: translateY(-50%);
  z-index: 99999;
  position: absolute;
}

希望能帮上忙。

如果有人还在寻找解决方案。这里是我如何设法修复它的React。这是一个有点黑客的解决方案，但最有可能是唯一的一个ATM。
首先，我们需要设置工具栏的样式（将className或样式传递给component：

.your-toolbar-classname {
     overflow: visible!important;
     contain: none!important;
}

然后我们还必须设计shadow-root部分的样式。我们可以在头文件挂载后使用useEffect并设置样式

// Header.tsx

...
    useEffect(() => {
    const style = document.createElement('style');
    style.innerHTML =
        '.toolbar-container { overflow: visible!important; contain: none!important; }';
    toolbarRef.current.shadowRoot.appendChild(style);
}, []);
...

只需使用离子菜单，它是一个内置的离子组件
https://ionicframework.com/docs/api/menu
还有离子弹
在发布到堆栈之前，您应该查看离子文档