Я использую библиотеку реагировать-toastify , чтобы показать тосты в моем приложении. По умолчанию тост имеет width: 320px. Поскольку иногда для этого слова недостаточно места, а часть этого слова не отображается, я попытался изменить размер тоста, используя следующую команду:
div.toast-resize {
width: auto;
max-width: 500px;
}
Это работает в Chrome, но, к сожалению, не в IE 11. В IE тосты всегда имеют min-width. Я думаю, что причина заключается в использовании flexbox для подтверждения. К сожалению, ни этот , ни этот обходной путь не сработал. Я создал следующий пример. Правила .Toastify* не могут быть изменены, div.toast-resize - мое собственное правило.
Как сделать так, чтобы это выглядело одинаково в IE и Chrome?
.Toastify__toast-container {
position: fixed;
width: 320px;
}
.Toastify__toast {
margin-bottom: 1rem;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.Toastify__toast--success {
background: #07bc0c;
}
.Toastify__toast-body {
flex: 1 1;
}
div.toast-resize {
width: auto;
max-width: 500px;
min-width: 100px;
}
<html>
<body>
<div class="Toastify">
<div class="Toastify__toast-container Toastify__toast-container--top-right toast-resize">
<div class="Toastify__toast Toastify__toast--success">
<div class="Toastify__toast-body" role="alert"
>Very long text with loooooooooooooooooooooooooooooooooooooooooooong word</div>
</div>
<div class="Toastify__toast Toastify__toast--success">
<div class="Toastify__toast-body" role="alert">Short text</div>
</div>
</div>
</div>
</body>
</html>