Fix #2297

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4b983875e878f4d3105438e94330b3a5a68f9b3e..8e1c829a1bbbe25f55a76c043b3120dde3ac2d8c 100644 (file)
--- a/CHANGELOG.md
+++ b/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
 

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index e2c30812fc7360ab8355c7666e7348c92a6cae3c..3a2eaa8c3e26fe6924939200a371d53cc625e395 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/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;
   }
 }
 

diff --git a/sass/elements/container.sass b/sass/elements/container.sass
index 2aaf591aec594e6a8e0faf3484a119a44365cb41..98f249ed09bed5e1f320d393f02565cb45933d6e 100644 (file)
--- a/sass/elements/container.sass
+++ b/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)