Fix #2937

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
 

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;

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%