html - Flexbox 列中带有 Flexbow 行的子菜单 : Submenu items not in same line

Question

我正在尝试构建一个具有固定位置左对齐控制面板的 UI(通过具有列方向的 flexbox 实现)，有时子菜单可用于此 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);
}

http://jsfiddle.net/hf5bts1a/15/

但是，子菜单无法正常工作，因为某些无法解释的原因，两个元素没有显示在一行中，而是再次显示为列(参见上面的 fiddle ；最低的“按钮”有一个带有 4 个附加条目的子菜单，见红色)。

Answer 1

我找到的解决方案是在子菜单按钮上设置 min-width:40.5px 并将 display:flex 添加到子菜单内的按钮组。