我正在尝试构建一个下拉式菜单，但我遇到了一些似乎是由flexbox引起的意外问题。悬停以打开下拉列表的菜单项使用如下样式进行样式设置以实现居中布局：
display: -ms-flexbox;
display: inline-flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-direction: column;
flex-direction: column;
inline-flex显示似乎在这些菜单项下打开的下拉列表中引起冲突。面板的内容似乎想要折叠到尽可能小的空间（甚至比我期望的内联块元素具有更大的空间来增长）。例如，我在下拉列表中有2个部分。我希望两者尽可能地扩展（链接大小最多20个），但每个部分都试图占用尽可能少的空间，并且面板甚至重叠。这是我的例子中的 JSFiddle （我为稍微凌乱的例子道歉，但我想尽可能保持尽可能接近我的情况）。如果您删除示例中的“inline-flex”块，那么您可以看到预期的行为，但我宁愿不必这样做来解决问题。
我认为此问题与a known flexbox issue with inline-flex containers struggling to size column wrapped elements有关，因为父级是flex列。也就是说，孩子们是弹性排，所以我会假设他们适当地计算他们的大小。
进一步检查后，只需用简单的display:inline-block;替换inline-flex规则即可复制该问题。这是示例的 fiddle 。
.navigation-bar__wrapper {
box-sizing: border-box;
position: relative;
z-index: 10;
}
.navigation-bar__wrapper .navigation-bar__dropdown-wrapper {
position: relative;
/* NOTE: Killing this line seems to fix the issue */
display:inline-block;
}
.navigation-bar__wrapper .navigation-bar__dropdown-wrapper:hover > .navigation-bar__menu-wrapper {
visibility: visible;
}
.navigation-bar__wrapper .navigation-bar__dropdown-wrapper > .navigation-bar__menu-wrapper {
left: 0;
top: 100%;
}
.navigation-bar__wrapper .navigation-bar__menu-wrapper {
background-color: #FFF;
/* NOTE: You can uncomment this line if you want the hovering effect */
/*visibility: hidden;*/
position: absolute;
border: 1px solid #000;
box-shadow: 3px 3px 2px #AAA;
z-index: 50;
top: 1px;
margin-left: -1.5em;
}
.navigation-bar__menu {
display: flex;
height: 325px;
padding: 2em;
font-size: 0.85em;
letter-spacing: 0.6px;
}
.navigation-bar__menu-item-wrapper {
display: inline-block;
padding: 1em 0.5em;
margin-right: 2em;
}
.navigation-bar__menu-item-wrapper .navigation-bar__menu-item-title {
max-width: 20em;
}
.navigation-bar__menu-item-wrapper .navigation-bar__menu-item-description {
color: #000;
line-height: 1.5em;
max-width: 20em;
}
.navigation-bar__menu-item-wrapper .navigation-bar__featured-image {
width: 193px;
height: 93px;
display: inline-block;
}
.navigation-bar__menu-section {
padding: 0 5px;
min-width: 150px;
}
.navigation-bar__menu-section + .navigation-bar__menu-section {
margin-top: 0;
padding-top: 0;
margin-left: 1em;
}
.navigation-bar__menu-section .navigation-bar__menu-section-title-wrapper {
padding-right: 2em;
}
.navigation-bar__menu-section .navigation-bar__menu-section-content-wrapper {
display: inline-flex;
flex-flow: wrap;
margin-top: 5px;
writing-mode: vertical-lr;
}
.navigation-bar__menu-section .navigation-bar__menu-section-content-wrapper > * {
writing-mode: horizontal-tb;
}
.navigation-panel-drilldown__wrapper .navigation-panel-drilldown__static-trigger {
padding: 1em 2em;
white-space: nowrap;
}
.navigation-panel-drilldown__wrapper .navigation-panel-drilldown__interactions-wrapper {
display: inline-flex;
flex-wrap: nowrap;
align-items: flex-start;
padding-top: 5px;
}
.navigation-panel-drilldown__wrapper .navigation-panel-drilldown__drilldown-content .navigation-bar__menu-item-wrapper {
display: block;
}
.navigation-bar__menu.has-panel-drilldown {
padding-left: 0;
}
.navigation-bar__menu.has-panel-drilldown .navigation-bar__menu-section {
padding-left: 0;
}
.navigation-bar__menu.has-panel-drilldown .navigation-bar__menu-section-title-wrapper.navigation-panel-drilldown__drilldown-title-wrapper {
padding-left: 2em;
}<div class="navigation-bar__wrapper">
<ul class="navigation-bar__dropdown-containers-wrapper">
<li class="navigation-bar__dropdown-wrapper navigation-bar__data-menu">
<span class="navigation-bar__dropdown-title-wrapper">
<a href="javascript:void(0)" class="navigation-bar__dropdown-title">I'm what is hovered to open the menu</a>
</span>
<div class="navigation-bar__menu-wrapper">
<div class="navigation-bar__menu has-panel-drilldown">
<div class="navigation-bar__menu-section navigation-panel-drilldown__wrapper">
<div class="navigation-bar__menu-section-title-wrapper navigation-panel-drilldown__drilldown-title-wrapper">
<div class="navigation-bar__menu-section-title">Drilldown section</div>
</div>
<div class="navigation-panel-drilldown__interactions-wrapper">
<div class="navigation-panel-drilldown__static-triggers-wrapper">
<div class="navigation-panel-drilldown__static-trigger selected">Section 1</div>
<div class="navigation-panel-drilldown__static-trigger">Section 2</div>
<div class="navigation-panel-drilldown__static-trigger">Section 3</div>
<div class="navigation-panel-drilldown__static-trigger">Section 4</div>
</div>
<div class="navigation-panel-drilldown__drilldown-content-wrapper">
<div class="navigation-panel-drilldown__drilldown-content">
<a href="/noop" target="_blank" class="navigation-bar__menu-item-wrapper">
<div class="navigation-bar__menu-item-title">Some long option name that is too compressed</div>
</a>
<a href="/noop" target="_blank" class="navigation-bar__menu-item-wrapper">
<div class="navigation-bar__menu-item-title">Some other option name</div>
</a>
<a href="/noop" target="_blank" class="navigation-bar__menu-item-wrapper">
<div class="navigation-bar__menu-item-title">last option name that's long</div>
</a>
</div>
</div>
</div>
</div>
<div class="navigation-bar__menu-section">
<div class="navigation-bar__menu-section-title-wrapper">
<div class="navigation-bar__menu-section-title">Extra</div>
</div>
<div class="navigation-bar__menu-section-content-wrapper">
<a href="/noop" target="_blank" class="navigation-bar__menu-item-wrapper">
<div class="navigation-bar__menu-item-title">Extra option</div>
<div class="navigation-bar__menu-item-description">Some long description name about the extra option here</div>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>