Как рассчитать max-width: calc (62,5% - 3rem), чтобы найти правильное значение? Где x и y являются целочисленными значениями

Question

Я работаю над некоторым исправлением пользовательского интерфейса, в котором я хочу исправить дизайн для правильной работы в веб-браузере IE.Данный дизайн использовал calc css для определения значения flex:

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -1.5rem;
  margin-left: -1.5rem;
}

.list-item {
  margin-bottom: 18px;
  border: solid 1px brown;
  -webkit-box-shadow: 0px 0px 14px 3px rgba(247, 248, 252, 0.7);
  box-shadow: 0px 0px 14px 3px rgba(247, 248, 252, 0.7);
  background-color: pink;
  padding: 16px 16px 12px 16px;
  border: solid 1px #f7f8fc;
  color: brown
}

.list-item-background {
  position: relative;
  background-color: black;
}

.personal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-right: solid 1px #e3e7ec;
  margin-right: 16px;
}

.col-md-5 {
  flex: 0 0 calc( 62.5% - 3rem);
  margin-left: 1.5rem;
  max-width: calc( 62.5% - 3rem);
}

.data {
  margin-left: 0rem;
  margin-top: 11px;
}

.col-md-3 {
  flex: 0 0 calc( 37.5% - 3rem);
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  max-width: calc( 37.5% - 3rem);
}

<div class="list">
  <div class="list-item-background">
    <div class="list-item">
      <div class="row">
        <div class="col-md-5 col-sm-8 col-xs-4 personal">
          <div class="avatar">
            My image and details
          </div>
        </div>
        <div class="col-md-3 col-sm-8 col-xs-4 data">
          <div class="Call">
            call button
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Я никогда не использовал calc для определения ширины, поэтому я не могу понять, как предыдущий разработчик рассчитал это значение% и rem и как я могу это исправить дляIE?

Пример кода можно найти по адресу:

jsfiddle link

Спасибо.