Bootstrap столбец и максимальная ширина детей

Question

У меня странная проблема с bootstrap, когда дочерний элемент столбца .col bootstrap, имеющий оба значения width:500px max-width:100%, будет игнорировать max-width при критической ширине отклика, тогда как дочерний элемент должен иметь максимальную ширину 100% от ширины его родителя (.col).

HTML

<div class="container-fluid">
  <div class="row align-items-center">
    <div class="col">
      <div class="row align-items-center">
        <div class="col-auto">
          <div class="item-1"></div>
        </div>

        <div class="col">
          <div class="item-2"></div>
        </div>
      </div>
    </div>

    <div class="col-auto">
      <div class="item-3"></div>
    </div>
  </div>
</div>

CSS

.container-fluid {
  height: 60px;
  background: #f4f4f4;
}

.item-1 {
  width: 140px;
  height: 40px;
  background: red;
}

.item-2 {
  width: 500px;
  height: 40px;
  max-width: 100%;
  background: green;
}

.item-3 {
  width: 400px;
  max-width: 100%;
  height: 40px;
  background: orange;
}

Вот пример: https://jsfiddle.net/nywj82co/ (попробуйте поиграть с шириной области просмотра)

Есть идеи, как решить эту проблему?