IE11不限制文本溢出的宽度：省略号

Question

我有一些HTML和CSS，它们在按钮旁边显示一长串文本。较长的文本字符串相对于按钮垂直居中，并且文本显示省略号...，因此所有内容都适合其容器内。

.body {
  width: 300px;
  border: thin solid black;
  height: 300px;
}

.outer-container {
  display: flex;
  max-width: 100%;
}

.content-container {
  display: inline-block;
  flex-grow: 1;
  min-width: 0;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 50px;
}

.section {
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.controls {
  display: flex;
  flex-shrink: 0;
  height: 50px;
}

<div class="body">
  <div class="outer-container">
    <div class="content-container">
      <div class="content">
        <div class="section">
          abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
        </div>
      </div> <!-- end content-->
    </div> <!-- end content-container -->
    <div class="controls">
      <button>Okay</button>
    </div> <!-- end controls -->
  </div> <!-- end outer-container -->
</div> <!-- end body -->

在Chrome中正常运行：

但是在IE11中不起作用：

具体来说，该文本不会被截断，因此会将按钮推离容器的右边缘。它也没有垂直居中。

Here是指向可编辑CodePen的链接，而here是生成的页面。

这是一个最小的示例，但是在我的真实代码中，我有很多重复的行，所有行的文本长度都不同（并且事先未知），所以我不能仅仅将节的宽度限制为硬编码宽度。

在这种情况下，为什么IE的行为会有所不同，该如何解决？