From 97cb0311f1a7cc611c73c0b3f1f1a8a070c760eb Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Fri, 17 May 2019 12:51:52 +0100
Subject: [PATCH] Fix #2297

---
 CHANGELOG.md                 | 1 +
 docs/css/bulma-docs.css      | 8 ++------
 sass/elements/container.sass | 8 ++------
 3 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4b983875..8e1c829a 100644
--- 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 e2c30812..3a2eaa8c 100644
--- 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 2aaf591a..98f249ed 100644
--- 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)