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

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

.item、.heading{
背景颜色：浅蓝色；
显示：内联flex；
宽度：150px；
高度：60px；
对齐项目：居中；
证明内容：中心；
}

没有空间让它们水平展开。@NiettheDarkAbsol好的，如果我从CSS中删除宽度定义，并将文本“子菜单”更改为更长的内容，我将获得子菜单项的正确方向。但是，为什么主菜单项的方向首先是正确的呢？当我将第54行更改为以下内容时，问题就解决了：

this.itemsContainer.style.display='flex'

它们没有空间水平展开。@NiettheDarkAbsol好的，如果我从CSS中删除宽度定义并将文本“Sub-menu”更改为更长的内容，我得到了子菜单项的正确方向。但为什么主菜单项的方向首先是正确的呢？当我将第54行更改为：

this.itemsContainer.style.display='flex'