解决IE11 Flex布局文本不换行的问题

在页面上使用了flex来布局，代码如下：

CSS：

.container{
    display: flex;
    flex-direction: column;
    border: 1px solid red;
    align-items: center;
  }
  .item {
    border: 1px solid blue;
  }

html：

<div class="container">
  <div class="item">
   事到手且莫急，便要缓缓想。想得时切莫缓，便要急急行。处天下事，只消得安详二字，兵贵神速，也须从此二字做出。然安祥非迟缓之谓也，从容详审，养奋发于定之中耳。
  </div>
  <div class="item">
   事到手且莫急，便要缓缓想。想得时切莫缓，便要急急行。处天下事，只消得安详二字，兵贵神速，也须从此二字做出。然安祥非迟缓之谓也，从容详审，养奋发于定之中耳。
  </div>
  </div>
 </div> 

文本是没有换行，在chrome则显示正确。

解决方法：

1、把align-items:center去掉，显示正确。但是与之前要的居中效果没有了

2、在flex容器的子元素上添加width:100%。示例的.item改为：

.item {
    border: 1px solid blue;
        width:100%;
  }