Looking some recent grid changes, I think the best option is to revert the latest tweaks and make some isolated improvements rather than the global row and container changes.
Here's a rundown of what got us to today:
- Shipped responsive containers in #29095 and #29118 w/ v4.4.0.
- Added
min-width: 0to.colto prevent some broken columns in #30049, which closed #25410 (closed). - Shipped #30979 to fix #30852 (closed), which reverted the above
min-widthchange. - Shipped #30940 to fix #30840 (closed), which added
flex: 1 0 100%to.rows so they didn't shrink if the parent was a flex container. This problem stemmed from v4.4.0 where navbar container was changed due to responsive containers. This caused #31432 (closed). - Shipped #30969 to de-dupe our container classes in our generated CSS, which also removed a mixin instead of deprecating it. This was a breaking change.
We've already removed the min-width: 0 in v4.5.1, so that's covered. The last step is to undo the flex: 1 0 100% on .rows and get us back to our stable grid in v4. This is causing the problem reported in #31435 (closed). Unsetting flex fixes the issue, so that's why this PR removes the line entirely.
The workaround for the <pre> element in the columns is to add min-width: 0 to help flex layout shrink past the content's size. This is documented at https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size. There's also a demo of this in the CodePen below.
#31438 restores the make-container-max-widths mixin, fixing our backward compatibility issue.
Adding .flex-fill to the .row in our navbars fixes the issue with the row not taking up the full width of the parent container that has display: flex. This addresses #30840 (closed) properly. We could add custom styles to the navbar's rows, but that just sounds like it'd perpetuate the issue here.
This demos hows all issues and changes at https://codepen.io/emdeoh/pen/LYNYmPR?editors=1100.
Fixes #31435 (closed), closes #31432 (closed).
My plan is to have us ship a v4.5.2 to fix the breaking change in #31438 and this PR to undo the grid changes and re-stabilize v4's grid system.