弹性项目的IE11溢出

Question

我试图理解在Chrome和IE11之间用长文本呈现弹性框项目之间的区别。 当IE11溢出项目时，Chrome会自动包装文本并将其放入容器中。使IE11与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;
}