Fix #2297

CHANGELOG.md

@@ -14,6 +14,7 @@
 
 * #2396 Update docs with webpack 4 example
 * #2381 Make centered buttons have equal margin
+* Fix #2297 -> Remove `.container` fixed width values, use `flex-grow`
 
 ### Bug fixes
 

docs/css/bulma-docs.css

@@ -2778,48 +2778,44 @@ fieldset[disabled] .button {
 }
 
 .container {
+  flex-grow: 1;
   margin: 0 auto;
   position: relative;
+  width: auto;
 }
 
 @media screen and (min-width: 1024px) {
   .container {
     max-width: 960px;
-    width: 960px;
   }
   .container.is-fluid {
     margin-left: 32px;
     margin-right: 32px;
     max-width: none;
-    width: auto;
   }
 }
 
 @media screen and (max-width: 1215px) {
   .container.is-widescreen {
     max-width: 1152px;
-    width: auto;
   }
 }
 
 @media screen and (max-width: 1407px) {
   .container.is-fullhd {
     max-width: 1344px;
-    width: auto;
   }
 }
 
 @media screen and (min-width: 1216px) {
   .container {
     max-width: 1152px;
-    width: 1152px;
   }
 }
 
 @media screen and (min-width: 1408px) {
   .container {
     max-width: 1344px;
-    width: 1344px;
   }
 }
 

sass/elements/container.sass

@@ -1,25 +1,21 @@
 .container
+  flex-grow: 1
   margin: 0 auto
   position: relative
+  width: auto
   +desktop
     max-width: $desktop - (2 * $gap)
-    width: $desktop - (2 * $gap)
     &.is-fluid
       margin-left: $gap
       margin-right: $gap
       max-width: none
-      width: auto
   +until-widescreen
     &.is-widescreen
       max-width: $widescreen - (2 * $gap)
-      width: auto
   +until-fullhd
     &.is-fullhd
       max-width: $fullhd - (2 * $gap)
-      width: auto
   +widescreen
     max-width: $widescreen - (2 * $gap)
-    width: $widescreen - (2 * $gap)
   +fullhd
     max-width: $fullhd - (2 * $gap)
-    width: $fullhd - (2 * $gap)