IE11 not restricting width with text-overflow: ellipsis

Question

I have some HTML and CSS that shows a long string of text next to a button. The long string of text is vertically centered relative to the button, and the text shows an ellipsis ... so it all fits inside its container.

.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 -->

This works fine in Chrome:

But it does not work in IE11:

Specifically, the text is not truncated, so it pushes the button off the right edge of the container. It's also not vertically centered.

Here is a link to an editable CodePen, and here is the resulting page.

This is a minimal example, but in my real code, I have many repeated rows, all with text of a different (and unknown ahead of time) length, so I can't just restrict the width of the section to a hard-coded width.

Why does IE behave differently in this case, and what can I do to fix it?