Ensure proper sizing of and alignment of content within input group addons and buttons

Fixes #20927.

1 files changed, 14 insertions, 1 deletions

diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index a33f2d303..52f2c13c2 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -24,6 +24,7 @@
     @include hover-focus-active {
       z-index: 3;
     }
+
     @if $enable-flex {
       flex: 1;
     } @else {
@@ -40,7 +41,12 @@
 .input-group-addon,
 .input-group-btn,
 .input-group .form-control {
-  @if not $enable-flex {
+  @if $enable-flex {
+    // Vertically centers the content of the addons within the input group
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  } @else {
     display: table-cell;
   }
 
@@ -158,9 +164,16 @@
   // element above the siblings.
   > .btn {
     position: relative;
+
+    @if $enable-flex {
+      // Vertically stretch the button and center its content
+      flex: 1;
+    }
+
     + .btn {
       margin-left: (-$input-btn-border-width);
     }
+
     // Bring the "active" button to the front
     @include hover-focus-active {
       z-index: 3;