Как заставить "width: max-content" работать как в IE11, так и в Chrome

Question

У меня есть несколько предупреждений bootstrap, которые используются в качестве информационных полей на моих страницах. Я использую их, чтобы показать пользователю, сколько отфильтрованных записей отображается в сетке данных по сравнению с тем, сколько фактических записей было возвращено. В Chrome я делаю это маленьким прямоугольником, который представляет собой ширину содержимого, но IE игнорирует это и делает предупреждение шириной содержащего столбца div. Я просмотрел кучу других "исправлений" для этого и попробовал все безрезультатно.

Версия Chrome:

Версия IE11:

HTML (это на странице AngularJS 1.7.9, Bootstrap 4.4.1):

<div class="col-12 col-md-4 mt-2 px-0 mx-0">
    <div id="divResultsMessage"
         class="bg-info border border-info rounded-sm text-dark alert-fit-content mr-auto ml-auto">
        Showing {{(vm.results | filter: vm.searchFilter).length}} out of {{vm.results.length}} results returned.
    </div>
</div>

«alert-fit-content» - это мой собственный класс:

.alert-fit-content {
    width: -moz-max-content !important;
    width: -webkit-max-content !important;
    width: -o-max-content !important;
    width: -ms-max-content !important;
    width: max-content !important;
    max-width: 100% !important;
    padding-right: 3px !important;
    padding-left: 3px !important;
}

Я пытался покрыть им все свои базы, но он просто не работает в IE, нет независимо от того, что я пытаюсь.

Answer 1

IE11 не поддерживает max-content

В этом случае я считаю, что вы можете получить желаемый результат, используя display: inline-block;

.alert-fit-content {
    display: inline-block;
    padding-right: 3px;
    padding-left: 3px;
}