diff --git a/src/components/calendar/_calendar.scss b/src/components/calendar/_calendar.scss
index 3483932f95d..0bf309f14ab 100644
--- a/src/components/calendar/_calendar.scss
+++ b/src/components/calendar/_calendar.scss
@@ -37,6 +37,11 @@
     // Easy rounded corners on contained elements,
     // specifically the footer of the calendar grid
     overflow: hidden;
+
+    .row {
+      // Prevent grid rows from wrapping
+      flex-wrap: nowrap;
+    }
   }
 
   .b-calendar-grid-caption {
diff --git a/src/components/form-datepicker/README.md b/src/components/form-datepicker/README.md
index 5e161f97dca..ee64da2568d 100644
--- a/src/components/form-datepicker/README.md
+++ b/src/components/form-datepicker/README.md
@@ -481,6 +481,39 @@ You can use the `isRTL` scoped property to "flip" the prev vs next button conten
 left-to-right to right-to-left orientation change — i.e. the previous year button will be on
 the right when `isRTL` is `true`, instead of the left.
 
+### Full width calendar dropdown
+
+To create a full width calendar dropdown (where the width matches the input width), simply set the
+`menu-class` prop to `'w-100'` and set the `calendar-width` prop to `'100%'`:
+
+```html
+<template>
+  <div>
+    <label for="datepicker-full-width">Choose a date</label>
+    <b-form-datepicker
+      id="datepicker-full-width"
+      v-model="value"
+      menu-class="w-100"
+      calendar-width="100%"
+      class="mb-2"
+    ></b-form-datepicker>
+    <p>Value: '{{ value }}'</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: ''
+      }
+    }
+  }
+</script>
+
+<!-- b-form-datepicker-full-width.vue -->
+```
+
 ## Internationalization
 
 Internationalization of the date picker's calendar is provided via
diff --git a/src/components/form-datepicker/form-datepicker.js b/src/components/form-datepicker/form-datepicker.js
index af73200e181..8d1b02307b5 100644
--- a/src/components/form-datepicker/form-datepicker.js
+++ b/src/components/form-datepicker/form-datepicker.js
@@ -530,7 +530,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
       {
         key: 'calendar',
         ref: 'calendar',
-        staticClass: 'b-form-date-calendar',
+        staticClass: 'b-form-date-calendar w-100',
         props: this.calendarProps,
         on: {
           selected: this.onSelected,