为什么我的inline-flex元素不显示内联？

Question

我正在尝试构建自定义元素菜单组件。我希望能够使菜单项垂直或水平定向。在我的示例中，主菜单项正确（水平）显示。但是由于某种原因，即使子菜单项也应显示为inline-flex，它们也会垂直定向。

Example in Codepen

.item, .heading {
  background-color: lightblue;
  display: inline-flex;
  width: 150px;
  height: 60px;
  align-items:center;
  justify-content:center;
}

为什么我的菜单项定向不同？

Answer 1

这是因为子菜单项受父容器的宽度限制。在JS将其显示值从无更改为块的＃秒内，将width:100%添加到容器中。