diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index 6aa5352a383c..1d9ec13578c4 100644
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -1,4 +1,7 @@
 .toast {
+  // Prevents from shrinking in IE11, when in a flex container
+  // See https://github.com/twbs/bootstrap/issues/28341
+  flex-basis: $toast-max-width;
   max-width: $toast-max-width;
   overflow: hidden; // cheap rounded corners on nested items
   @include font-size($toast-font-size);
diff --git a/site/docs/4.5/components/toasts.md b/site/docs/4.5/components/toasts.md
index 58b5cb5cae1a..7ef36c7f7665 100644
--- a/site/docs/4.5/components/toasts.md
+++ b/site/docs/4.5/components/toasts.md
@@ -167,7 +167,7 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
 
 {% capture example %}
 <!-- Flexbox container for aligning the toasts -->
-<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
+<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">
 
   <!-- Then put toasts within -->
   <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">