flex-shrink won't shrink item in IE 10/11 and causes parent to be wider than parent

Question

My layout consists of a single row with three columns.

Left and right should be as wide as their content. The rest of the width should be occupied by the title column. The total width of all columns should never be wider than the parent.

All columns should only have a single line of content, no line breaks.

If the content of the title column doesn't fit within the constraints an ellipsis character should be added at the end.

All this works in Chrome and Edge but IE refuse to shrink the title column so the columns fit within their parent's width.

html,
body {
  width: 100%;
  margin: 0;
}

.row {
  display: -ms-flexbox;
  display: flex;
  /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
  width: 200px;
}

[class*='cell-'] {
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  /* https://css-tricks.com/flexbox-truncated-text/ */
  min-width: 0;
}

.cell-left {
  background: red;
}

.cell-title {
  white-space: nowrap;
  -ms-flex: 0 1 auto;
      flex: 0 1 auto;
}

.hover {
  overflow-x: hidden;
  text-overflow: ellipsis;
  position: relative;
  padding-right: 1em;
}

.chevron {
  position: absolute;
  right: 0;
}

.hover:hover {
  background: green;
}

.cell-right {
  background: yellow;
  margin-left: auto;
}

<div class="row">
  <div class="cell-left">Left</div>
  <div class="cell-title">
    <div class="hover">Pellentesque habitant morbi tristique senectus et netus et malesuada<span class="chevron">^</span></div>
  </div>
  <div class="cell-right">Right</div>
</div>

Answer 1

IE 10/11 need a specified width on the middle item. Make this adjustment to your code

.row {
  display: flex;
  width: 200px;
}

.cell-title {
  width: 100%;
  min-width: 0;
  display: flex;
}

.hover {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-title::after {
  content: '^';
  padding-left: 5px;
  margin-right: auto;
}

.hover:hover { background: green; }
.cell-left   { background: red; }
.cell-right  { background: yellow; }
html, body   { margin: 0; }

<div class="row">
  <div class="cell-left">Left</div>
  <div class="cell-title">
    <div class="hover">Pellentesque habitant morbi tristique senectus et netus et malesuada</div>
  </div>
  <div class="cell-right">Right</div>
</div>

jsFiddle demo