Flex孩子在IE11中没有正确包装

Question

我有这个布局（我目前无法改变，可能是一些小的补充）：codepen

html {
  min-height: 100%;
}

body {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  width: 100%;
}

main {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.flex {
  display: flex;
  padding: 0;
  margin: 0;
  position: relative;
}

main>.flex {
  width: 100%;
  flex-grow: 1;
  flex-shrink: 1;
}

.panel {
  margin: 8px;
  padding: 0;
  position: relative;
}

.panel>div:nth-child(1) {
  padding: 16px;
  margin-top: 0;
  position: relative;
}

.input {
  padding: 0;
  position: relative;
  display: inline-block;
  margin: 8px;
  min-width: 150px;
  background: red;
}

.textarea {
  margin: 8px;
  position: relative;
  display: block;
  min-width: 300px;
  background: red;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

<main>
  <div class="flex flex-column">
    <div class="panel" style="flex-grow:1">
      <div>
        <div class="flex flex-row flex-wrap">
          <div class="flex flex-column" style="flex-grow:1">
            <div class="input"><input type="text"></div>
            <div class="input"><input type="text"></div>
            <div class="flex flex-row flex-wrap">
              <div class="input"><input type="text" value="This one"></div>
              <div class="input"><input type="text" value="and this one"></div>
            </div>
            <div class="input"><input type="text"></div>
            <div class="input"><input type="text"></div>
          </div>
          <div class="flex flex-column" style="flex-grow:1">
            <div class="textarea"><textarea></textarea></div>
            <div class="textarea"><textarea></textarea></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

问题仅发生在IE11中，当窗口低于某个宽度时，带有文本的两个输入不会换行。在chrome中一切正常。