Html Flexbox列中包含Flexbow行的子菜单：子菜单项不在同一行中

我正在尝试构建一个具有固定位置左对齐控制面板（通过具有列方向的flexbox实现）的UI，其中有时子菜单可用于此flexbox中的给定项。此子菜单应显示在父项的左侧。到目前为止，我所拥有的一切看起来很有希望：

.fixed-menu {
  position: fixed;
  z-index: 9999999;
  left: 0;
  display: flex;
  width: 40.5px;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
.submenu {
  height: 40.5px;
  position: relative;
  left: 41px;
  display: flex;
  flex-direction: row;
  max-width: calc(100vw);
}

---

但是，由于某些无法解释的原因，子菜单无法正常工作，两个项目没有显示在一行中，而是显示为列（请参见上面的小提琴；最低的“按钮”有一个子菜单，包含4个附加条目，请参见红色）.

我找到的解决方案是在子菜单按钮上设置

最小宽度：40.5px

，并在子菜单内的按钮组中添加

显示：flex

。

您好，Zahlii，请在问题本身中提供答案。而且，我只看到一个子菜单，它只有三个条目，而不是四个条目。@TylerH这正是重点。子菜单有四个条目，但只有三个条目在一行中正确显示。第四行实际上跳到了下一行，它不应该跳到下一行。我更新了答案以更清楚地反映这一点，并更新了fiddle。我的意思是我在标记中只看到三个子元素。