Safari/Chrome (Webkit) 中奇怪的 CSS flex 溢出

Question

我遇到了一个让我发疯的 CSS Safari/Chrome (Webkit) flex 问题。有一个顶部菜单，下面列出了子项目，它在主页面和子页面上的行为非常不同，但看似相同的 HTML 和 CSS 适用。我无法在 jsfiddle 中重现该问题，而且 HTML / CSS 太多了，所以我将首先展示开发工具的 flex 大纲的屏幕截图，它可能已经表明出了什么问题。首先它应该是怎样的：

下一个子页面：

有一些显着的差异：

1. 在正确的布局中，“菜单条目”周围的空间更大。
2. 子菜单条目之间的空间太小。
3. “入口1”在顶部溢出flex布局
4. Menu Entry 框和“Entry 1”之间的空间（见绿色/蓝色轮廓）在正确版本中较小

我尝试了什么：比较菜单 DOM 中的几乎每个元素及其样式声明，没有发现任何差异。此外，它在 Firefox 上运行得很好。

我不希望任何人提出确切的解决方案，但我希望有人已经看到了与此类似的问题，并可能会指出在哪里寻找的方向。我也尝试向 ChatGPT 4 解释我的问题，但它只是提出了解决方案来缩小我已经尝试过的问题范围。这让我发疯。