当使用百分比进行flex-basis时，IE11不会换行

Question

我正在尝试以50％宽度显示两列，如果宽度小于可用宽度，将自动换行。此代码适用于Firefox和Chrome，但不适用于IE11。

如果删除flex-basis:50%，IE将正确换行，但宽屏幕上的宽度不是50％。

备注：如果我向div元素添加填充，则所有浏览器都会封装内容。在flexbox中处理填充的正确方法是什么？

.flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.flex > div{
	flex-grow:1;
	flex-basis:50%;
}

div:first-child{
  background-color: #cfc;
}
div:last-child{
  background-color: #ccf;
}

<section class="flex">
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div>
        <textarea rows="5" cols="40"></textarea>
    </div>
</section>

CodePen：https://codepen.io/wicketr/pen/JJWvLB