IE11 overflow of flex item

Question

I'm trying to understand the difference between rendering flexbox items with long text between Chrome and IE11. Chrome wraps the text and fits the items in the container while IE11 overflows the item. What would be the best way to make IE11 behave consistent with Chrome?

https://codepen.io/jakubsadura/pen/YOMXKR?editors=1100

HTML:

<div class="container">
  <div class="flex">
    <div class="allocation-chart">
      <div class="allocation-chart__donutchart">
        <div class="highcharts--donut"></div>
      </div>
      <div class="allocation-chart__details">
        <ul>          
          <li class="details-item">
            <div class="details-key details-key--wrap">
              longlonglonglonglonglonglonglong

              long long long long long long long long long long long long long long long long long
            </div>
            <div class="details-val">
              <span class="formatted-currency-value t-num">
                111,111.11
                <span class="formatted-currency-value__code">
                  ABC
                </span>                
              </span>              
            </div>            
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS:

.container {
  width: 309px;
}
.flex {
  display: flex;
  border: 3px solid red;
  justify-content: center;
}
.allocation-chart {
  display: flex;
  max-width: 320px;
  margin: 0 auto;
}
.allocation-chart__donutchart {
  padding-right: 8px;
}
.highcharts--donut {
  width: 120px;
  height: 120px;
  background: gray;
}
.allocation-chart__details {
  flex-grow: 1;
  background: lightblue;
}
.details-item {
    min-height: 24px;
    display: flex;
    align-items: center;
}
.details-key {
  float: none;
  margin-right: 8px;
  color: #888;
  word-break: break-word;
}
.details-val {
    flex-grow: 1;
    display: block;
    text-align: right;
    text-align: end;
}
.t-num {
    direction: ltr;
    display: inline-block;
}