diff --git a/scss/_containers.scss b/scss/_containers.scss
index 125de8d9b06a..bb18d4c0e7b9 100644
--- a/scss/_containers.scss
+++ b/scss/_containers.scss
@@ -4,18 +4,19 @@
 
 @if $enable-grid-classes {
   // Single container class with breakpoint max-widths
-  .container {
-    @include make-container();
-    @include make-container-max-widths();
-  }
-
+  .container,
   // 100% wide container at all breakpoints
   .container-fluid {
     @include make-container();
   }
 
-  // Responsive containers that are 100% wide until a breakpoint
-  @each $breakpoint, $container-max-width in $container-max-widths {
+  // Avoid gaps for length differences
+  $start: if(length($grid-breakpoints) > length($container-max-widths), 1, 0);
+
+  @for $i from 1 through length($container-max-widths) {
+    $breakpoint:          nth(nth($container-max-widths, $i), 1);
+    $container-max-width: nth(nth($container-max-widths, $i), 2);
+
     .container-#{$breakpoint} {
       @extend .container-fluid;
     }
@@ -25,18 +26,18 @@
         max-width: $container-max-width;
       }
 
-      // Extend each breakpoint which is smaller or equal to the current breakpoint
-      $extend-breakpoint: true;
+      .container {
+        @extend %responsive-container-#{$breakpoint};
+      }
 
-      @each $name, $width in $grid-breakpoints {
-        @if ($extend-breakpoint) {
-          .container#{breakpoint-infix($name, $grid-breakpoints)} {
-            @extend %responsive-container-#{$breakpoint};
-          }
+      @if ($i != length($container-max-widths)) {
+        @for $j from $start + $i through length($grid-breakpoints) - 1 {
+          $name: nth(nth($grid-breakpoints, $j), 1);
 
-          // Once the current breakpoint is reached, stop extending
-          @if ($breakpoint == $name) {
-            $extend-breakpoint: false;
+          @if map-get($container-max-widths, $name) {
+            .container-#{$name} {
+              @extend %responsive-container-#{$breakpoint};
+            }
           }
         }
       }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2af7461a0048..0bc2c450aee8 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -302,6 +302,7 @@ $grid-breakpoints: (
 
 // scss-docs-start container-max-widths
 $container-max-widths: (
+  xs: 440px,
   sm: 540px,
   md: 720px,
   lg: 960px,
diff --git a/scss/mixins/_container.scss b/scss/mixins/_container.scss
index 67c2f5fdca0b..435d0034107d 100644
--- a/scss/mixins/_container.scss
+++ b/scss/mixins/_container.scss
@@ -7,13 +7,3 @@
   margin-right: auto;
   margin-left: auto;
 }
-
-
-// For each breakpoint, define the maximum width of the container in a media query
-@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint, $container-max-width in $max-widths {
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      max-width: $container-max-width;
-    }
-  }
-}