ie11 сжимает содержимое div даже при переполнении: скрыто

Question

У меня установлена ​​звезда обзора, в которой ширина нижнего слоя (серого цвета) установлена ​​на 100%, а на верхнем слое (золото) установлена ​​переменная (например, 96%).Ширина верхнего слоя задается с помощью JS на основе вызова сайта обзора и добавляется в виде встроенного стиля.

В Chrome и других популярных браузерах звезды обзора отображаются следующим образом:

На IE11 звезды обзора отображаются так:

Я вижу, что IE сжимает div до 96%, но он также сжимает содержимое div (звезды SVG) вместо того, чтобы скрывать переполнение.

Вот CSS:

.product-section__container .front-stars {
    width: 96% /* -- added inline -- */
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    color: #ffbc0b;
    overflow: hidden;
    top: 0;
    left: 0;
}

Какие-нибудь советы о том, как решить эту проблему?Это первый раз, когда я столкнулся с такой проблемой!