Fix #2937

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 574bfe877509f35dc2e11ec6316d3b2b1d87b44e..af9584bfd3e9a1b940e15d0828c98f4f0e64fb7a 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 * #3005 Fix `column` offsets in RTL
 * Fix #3145 Dropdown content is bounded by a parent card
 * Fix #3089 Sub columns of a variable columns have weird gap
+* Fix #2937 Add `width: unset` for narrow columns
 
 ### Improvements
 

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 54078d90a33f2106bd298342c59c11f343a0d13e..9ad23d81b602614f808acda0da048f1962e7dd5f 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -6941,6 +6941,7 @@ label.panel-block:hover {
 
 .columns.is-mobile > .column.is-narrow {
   flex: none;
+  width: unset;
 }
 
 .columns.is-mobile > .column.is-full {
@@ -7149,6 +7150,7 @@ label.panel-block:hover {
 @media screen and (max-width: 768px) {
   .column.is-narrow-mobile {
     flex: none;
+    width: unset;
   }
   .column.is-full-mobile {
     flex: none;
@@ -7313,6 +7315,7 @@ label.panel-block:hover {
 @media screen and (min-width: 769px), print {
   .column.is-narrow, .column.is-narrow-tablet {
     flex: none;
+    width: unset;
   }
   .column.is-full, .column.is-full-tablet {
     flex: none;
@@ -7477,6 +7480,7 @@ label.panel-block:hover {
 @media screen and (max-width: 1023px) {
   .column.is-narrow-touch {
     flex: none;
+    width: unset;
   }
   .column.is-full-touch {
     flex: none;
@@ -7641,6 +7645,7 @@ label.panel-block:hover {
 @media screen and (min-width: 1024px) {
   .column.is-narrow-desktop {
     flex: none;
+    width: unset;
   }
   .column.is-full-desktop {
     flex: none;
@@ -7805,6 +7810,7 @@ label.panel-block:hover {
 @media screen and (min-width: 1216px) {
   .column.is-narrow-widescreen {
     flex: none;
+    width: unset;
   }
   .column.is-full-widescreen {
     flex: none;
@@ -7969,6 +7975,7 @@ label.panel-block:hover {
 @media screen and (min-width: 1408px) {
   .column.is-narrow-fullhd {
     flex: none;
+    width: unset;
   }
   .column.is-full-fullhd {
     flex: none;

diff --git a/sass/grid/columns.sass b/sass/grid/columns.sass
index 995bf2475892821e1f8ecf6c6086a6a58e391167..af365864238a373e46884452b78e3092729e0731 100644 (file)
--- a/sass/grid/columns.sass
+++ b/sass/grid/columns.sass
@@ -8,6 +8,7 @@ $column-gap: 0.75rem !default
   padding: $column-gap
   .columns.is-mobile > &.is-narrow
     flex: none
+    width: unset
   .columns.is-mobile > &.is-full
     flex: none
     width: 100%
@@ -65,6 +66,7 @@ $column-gap: 0.75rem !default
   +mobile
     &.is-narrow-mobile
       flex: none
+      width: unset
     &.is-full-mobile
       flex: none
       width: 100%
@@ -123,6 +125,7 @@ $column-gap: 0.75rem !default
     &.is-narrow,
     &.is-narrow-tablet
       flex: none
+      width: unset
     &.is-full,
     &.is-full-tablet
       flex: none
@@ -201,6 +204,7 @@ $column-gap: 0.75rem !default
   +touch
     &.is-narrow-touch
       flex: none
+      width: unset
     &.is-full-touch
       flex: none
       width: 100%
@@ -258,6 +262,7 @@ $column-gap: 0.75rem !default
   +desktop
     &.is-narrow-desktop
       flex: none
+      width: unset
     &.is-full-desktop
       flex: none
       width: 100%
@@ -315,6 +320,7 @@ $column-gap: 0.75rem !default
   +widescreen
     &.is-narrow-widescreen
       flex: none
+      width: unset
     &.is-full-widescreen
       flex: none
       width: 100%
@@ -372,6 +378,7 @@ $column-gap: 0.75rem !default
   +fullhd
     &.is-narrow-fullhd
       flex: none
+      width: unset
     &.is-full-fullhd
       flex: none
       width: 100%