当应用程序位于 div 中时，离子工具栏会触发视口之外的上下文菜单

Question

我刚刚使用以下命令创建了一个Ionic 6应用程序：

$ ionic start happy-meal tabs --type=react

我的目标是：

1. 在最后有一个带有MENU按钮的工具栏，单击它会打开一个上下文菜单。
2. 该应用程序应包含在DIV中。

我的问题是：

我在下面的代码按预期将应用程序包含在DIV中，但是当单击按钮时，上下文菜单不在正确的 position 上（它应该出现在可视区域内），如下图所示：

您可以自己测试代码，只需将文件： App.tsx的内容替换为：

import {
  IonApp,
  IonButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonPage,
  IonRow,
  IonTitle,
  IonToolbar,
  setupIonicReact,
  useIonPopover
} from '@ionic/react';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

setupIonicReact();

const Navbar = () => {
  const Popover = () => <IonContent className="ion-padding">Hello World!</IonContent>;
  const [present, dismiss] = useIonPopover(Popover, {
    onDismiss: (data: any, role: string) => dismiss(data, role),
  });
  return (
    <IonHeader>
      <IonToolbar>
        <IonTitle size="large">Happy Meal</IonTitle>
        <IonButtons slot="end">
          <IonButton onClick={
            (e: any) => present({
              event: e,
            })
          }>Menu</IonButton>
        </IonButtons>
      </IonToolbar>
    </IonHeader>
  );
};

const Screen = () => {
  return (
    <IonPage>
      <Navbar />
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Screen</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonRow>
          You are on the main Screen.
        </IonRow>
      </IonContent>
    </IonPage>
  );
};

const App = () =>
  <div style={{ textAlign: 'center' }}>
    <div style={{
      display: 'inline-block',
      margin: '20px auto',
      textAlign: 'left',
      position: 'relative',
      width: '400px',
      height: '750px',
      fontSize: '0.9em',
      border: 'solid 2px #bfbfbf',
    }}>
      <IonApp>
        <Screen />
      </IonApp>
    </div>
  </div>;

export default App;

关于如何解决这个问题的任何想法？

谢谢！