This PR removes the flex
shorthand and max-width
on the make-col
mixin, reducing it back down to the width
alone. This mixins is used to generate our .col
classes, so we're removing those styles from all those classes, too. When using the flex shorthand—in particular the flex-basis
part—to set the width, we needed to account for IE10+ and Firefox not sizing things properly with duplicate CSS.
Removing these properties for width
also gives us the benefit of implicit responsive width utilities. Have something you want 25%
wide? Use .col-3
. Want that 50%
wide at medium and up? Use .col-md-6
. This should effectively close #22374.
After this PR ships, we can go back and remove the width and height utility classes as they'll be duplicate.
- Original PR where
max-width
was added: #17756. - Example of new changes in action: https://output.jsbin.com/wumubid.
/cc @zalog