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

…columns (#20169)

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

* Block Library: Columns: Restore mid-range viewport styles

* Block Library: Columns: Keep margin resets in mid-range viewports

Reference from prior to #19515 : https://github.com/WordPress/gutenberg/blob/7997bf66490bab0f6984a114c22ad125f04b9e89/packages/block-library/src/columns/editor.scss#L69-L75

* Block Library: Columns: Update comment to reference mid-range 2 columns

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

@@ -66,20 +66,32 @@
 			// Responsiveness: Show at most one columns on mobile.
 			flex-basis: 100%;
 
+			// Between mobile and large viewports, allow 2 columns.
 			@include break-small() {
+				flex-basis: calc(50% - (#{$grid-size-large}));
+				flex-grow: 0;
+				margin-left: 0;
+				margin-right: 0;
+			}
+
+			// At large viewports, show all columns horizontally.
+			@include break-medium() {
+				// 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-basis: 0;
 				flex-grow: 1;
-				flex-basis: auto;
 
-				// 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;
 				}
-
-				margin-left: 0;
-				margin-right: 0;
 			}
 
 			// Add space between columns. Themes can customize this if they wish to work differently.

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

@@ -30,15 +30,10 @@
 	word-break: break-word; // For back-compat.
 	overflow-wrap: break-word; // New standard.
 
+	// Between mobile and large viewports, allow 2 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.
-		&[style] {
-			flex-grow: 0;
-		}
+		flex-basis: calc(50% - #{$grid-size-large});
+		flex-grow: 0;
 
 		// Add space between the multiple columns. Themes can customize this if they wish to work differently.
 		// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
@@ -47,7 +42,23 @@
 		}
 	}
 
+	// At large viewports, show all columns horizontally.
 	@include break-medium() {
+		// 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-basis: 0;
+		flex-grow: 1;
+
+		// Columns with an explicitly-assigned width should maintain their
+		// `flex-basis` width and not grow.
+		&[style] {
+			flex-grow: 0;
+		}
 
 		// When columns are in a single row, add space before all except the first.
 		&:not(:first-child) {