Flexbox列中具有Flexbow行的子菜單：子菜單項不在同一行中

Question

我試圖用固定位置的左對齊控制面板（通過具有列方向的flexbox實現）構建UI，在該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);
}

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

但是，子菜單無法正常工作，因為某些無法解釋的原因，沒有在一行中顯示兩個項目，而是再次顯示為列（請參見上面的小提琴；最低的“按鈕”具有一個帶有4個其他條目的子菜單，以紅色顯示） ）。

Answer 1

我發現的解決方案是在子菜單按鈕上設置min-width:40.5px ，並將display:flex添加到子菜單內的按鈕組。