Block Library: Columns: Fix equal column growth for unassigned-width …

…columns

packages/block-library/src/columns/editor.scss

@@ -66,14 +66,21 @@
 			// Responsiveness: Show at most one columns on mobile.
 			flex-basis: 100%;
 
+			// Beyond mobile, allow columns.
 			@include break-small() {
+				// Available space should be divided equally amongst columns
+				// without an assigned width. This is achieved by assigning a
+				// flex basis that is consistent (equal), would not cause the
+				// sum total of column widths to exceed 100%, and which would
+				// cede to a column with an assigned width. The `flex-grow`
+				// allows columns to maximally and equally occupy space
+				// remaining after subtracting the space occupied by columns
+				// with explicit widths (if any exist).
 				flex-grow: 1;
-				flex-basis: auto;
+				flex-basis: 0;
 
-				// Beyond mobile, allow columns. Columns with an explicitly-
-				// assigned width should maintain their `flex-basis` width and
-				// not grow. All other blocks should automatically inherit the
-				// `flex-grow` to occupy the available space.
+				// Columns with an explicitly-assigned width should maintain
+				// their `flex-basis` width and not grow.
 				&[data-has-explicit-width] {
 					flex-grow: 0;
 				}

packages/block-library/src/columns/style.scss

@@ -30,12 +30,19 @@
 	word-break: break-word; // For back-compat.
 	overflow-wrap: break-word; // New standard.
 
+	// Beyond mobile, allow columns.
 	@include break-small() {
-
-		// Beyond mobile, allow columns. Columns with an explicitly-assigned
-		// width should maintain their `flex-basis` width and not grow. All
-		// other blocks should automatically inherit the `flex-grow` to occupy
-		// the available space.
+		// Available space should be divided equally amongst columns without an
+		// assigned width. This is achieved by assigning a flex basis that is
+		// consistent (equal), would not cause the sum total of column widths to
+		// exceed 100%, and which would cede to a column with an assigned width.
+		// The inherited `flex-grow` allows columns to maximally and equally
+		// occupy space remaining after subtracting the space occupied by
+		// columns with explicit widths (if any exist).
+		flex-basis: 0;
+
+		// Columns with an explicitly-assigned width should maintain their
+		// `flex-basis` width and not grow.
 		&[style] {
 			flex-grow: 0;
 		}