use flex and direction to do the stacked controls instead of float hacks

This also fixes #21280. Previously, we were using float and clear on the individual controls, but that meant a computer height of `0` for the parent `.custom-controls-stacked`. No more problem after using flexbox though.

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 6511a2998e6b7fe07913e2e690f1ecef58ec81d3..8c2ce328f6f02dae74380ef727c8f69123129701 100644 (file)
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -114,10 +114,11 @@
 // set. Use these optional classes to tweak the layout.
 
 .custom-controls-stacked {
+  display: flex;
+  flex-direction: column;
+
   .custom-control {
-    float: left;
     margin-bottom: $custom-control-spacer-y;
-    clear: left;
 
     + .custom-control {
       margin-left: 0;