Bootstrap invalid-tooltip не работает правильно в IE

Question

Забавная проблема с IE-совместимостью, с которой я только что столкнулся. У меня есть такой код:

<div class="row d-flex justify-content-around">
    <div class="col-sm-12 col-md-4 px-3">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">{% trans 'Some string' %}</span>
            </div>
            {{ base_form_key.ss }}
            <div class="invalid-tooltip">
                {% trans 'Enter a correct value or leave this field empty. x and y cannot be the same!' %}
            </div>
        </div>  
    </div>        
</div>

Этот код в Chrome генерирует для меня хороший вывод, который я ожидаю:

Однако в IE он растягивается по вертикали в окне всплывающей подсказки следующим образом:

Что мне говорит, так это то, что IE интерпретирует некоторые стили CSS по-другому, чем Chrome, но не знаю, что именно. Кто-нибудь сталкивался с такой же проблемой?