嵌套的inline-flex容器与Internet Explorer中的父元素重叠

Question

我有一个在菜单中构建部分的组件。该组件在几个位置使用flexbox。我的方法似乎适用于大多数浏览器，但IE10 / 11遇到了问题。我试过翻阅some common flexbox issues in IE，但我似乎无法将我的问题缩小到具体问题。下面的代码段是问题的近似表示。

基本上我希望紫色框完全包含绿色框。我猜这个问题与我提供给menu-section规则的最小宽度有关，但我似乎无法找到一个很好的解决方案来嵌套溢出该部分的Flex容器。

.menu-wrapper {
  height: 250px;
  display: inline-flex;
  box-sizing: border-box;
  padding: 0.5em;
  outline: 1px solid red;
  margin: 1em;
}

.menu-section {
  outline: 3px solid purple;
  box-sizing: border-box;
  padding: 0 0.5em;
  min-width: 150px;
}

.menu-items-wrapper {
  height: 100%;
  outline: 1px solid green;
  box-sizing: border-box;
  display: inline-flex;
	display: -ms-inline-flexbox;
	flex-flow: wrap;
  /* Using this writing mode hack to get columns to respect wrapped element size in Chrome/FF */
	writing-mode: vertical-lr;
	-ms-writing-mode: tb-lr;
	-webkit-writing-mode: vertical-lr;
}

.menu-items-wrapper > * {
  writing-mode: horizontal-tb;
  -ms-writing-mode: lr-tb;
  -webkit-writing-mode: horizontal-tb;
}

.menu-item {
  background: hsla(0, 0%, 0%, 0.1);
  padding: 1em 0.5em;
  margin-right: 1em;
  outline: 1px solid black;
  display: inline-block;
}

<div class="menu-wrapper">
  <div class="menu-section">
    <div class="menu-items-wrapper">
      <a class="menu-item">One</a>
      <a class="menu-item">Two</a>
      <a class="menu-item">Three</a>
      <a class="menu-item">Four</a>
      <a class="menu-item">Five</a>
      <a class="menu-item">Six</a>
      <a class="menu-item">Seven</a>
      <a class="menu-item">Eight</a>
      <a class="menu-item">Nine</a>
      <a class="menu-item">Ten</a>
    </div>
  </div>
</div>

以下是IE11中的内容截图：