Почему не срабатывает object-fit: cover для изображения?

Question

[Руслан]

У меня есть такая html разметка:

<div class="cart_content__one">
            <div class="cart_content__img">
                <img src="/img/products_pictures/${item.img}">
            </div>
            <div class="cart_content__name">${item.name}</div>
            <div class="cart_content__price">${item.price}</div>
            <div class="cart_content__quantity">
                <div class="quantity_minus_plus"><button><i class="fa fa-minus" aria-hidden="true"></i></button></div>
                <div><span>${item.quantity}</span></div>
                <div class="quantity_minus_plus"><button><i class="fa fa-plus" aria-hidden="true"></i></button></div>
            </div>
</div>

Пытаюсь картинки выровнять:

.cart_content__one {
  display: flex;
  padding: 12px;
  gap: 20px;
  align-items: center;
}
.cart_content__img {
  max-width: 16%;
}
.cart_content__img img {
  width: 100%;
  display: block;
  height: 100px;
  object-fit: cover;
}

Но почему-то не срабатывает. Если у картинки большая высота, то она все равно не обрезается

Comments

[Сергей delphinpro]

нужен пример в песочнице с воспроизведением проблемы

[Руслан]

Сергей delphinpro, а где она находится?

[Сергей delphinpro]

Руслан, это сторонние ресурсы. Например https://codepen.io

[Руслан]

Сергей delphinpro, ну вот если здесь делаю https://codepen.io/kuchuluk/pen/poGPNPm
то срабатывает. А у меня нет

[Сергей delphinpro]

Руслан, я поэтому и написал, что нужен код, воспроизводящий вашу проблему. Просто так угадать, что у вас там происходит, вряд ли кто-то сможет.