diff --git a/change/@ni-nimble-components-f4992b1c-b7f0-46e1-a684-b5afff8683f6.json b/change/@ni-nimble-components-f4992b1c-b7f0-46e1-a684-b5afff8683f6.json
new file mode 100644
index 0000000000..df0818759e
--- /dev/null
+++ b/change/@ni-nimble-components-f4992b1c-b7f0-46e1-a684-b5afff8683f6.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Align positioning behavior of rich-text mention listbox, combobox, select, and menu button",
+  "packageName": "@ni/nimble-components",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/nimble-components/src/anchored-region/index.ts b/packages/nimble-components/src/anchored-region/index.ts
index 1df8c8d2c8..ee3488a261 100644
--- a/packages/nimble-components/src/anchored-region/index.ts
+++ b/packages/nimble-components/src/anchored-region/index.ts
@@ -1,7 +1,9 @@
+import { observable } from '@ni/fast-element';
 import {
     DesignSystem,
     AnchoredRegion as FoundationAnchoredRegion,
-    anchoredRegionTemplate as template
+    anchoredRegionTemplate as template,
+    type AnchoredRegionPositionLabel
 } from '@ni/fast-foundation';
 import { styles } from './styles';
 
@@ -22,7 +24,11 @@ declare global {
 /**
  * A nimble-styled anchored region control.
  */
-export class AnchoredRegion extends FoundationAnchoredRegion {}
+export class AnchoredRegion extends FoundationAnchoredRegion {
+    /* @internal */
+    @observable
+    public override verticalPosition: AnchoredRegionPositionLabel | undefined;
+}
 
 const nimbleAnchoredRegion = AnchoredRegion.compose({
     baseName: 'anchored-region',
diff --git a/packages/nimble-components/src/combobox/index.ts b/packages/nimble-components/src/combobox/index.ts
index e8f036e52b..ae83c660eb 100644
--- a/packages/nimble-components/src/combobox/index.ts
+++ b/packages/nimble-components/src/combobox/index.ts
@@ -1,9 +1,16 @@
-import { DOM, Observable, attr, html, observable, ref } from '@ni/fast-element';
+import {
+    attr,
+    DOM,
+    html,
+    observable,
+    Observable,
+    ref,
+    type Notifier
+} from '@ni/fast-element';
 import {
     DesignSystem,
     type ComboboxOptions,
     ComboboxAutocomplete,
-    SelectPosition,
     ListboxOption,
     DelegatesARIACombobox,
     applyMixins,
@@ -28,8 +35,10 @@ import { styles } from './styles';
 import { mixinErrorPattern } from '../patterns/error/types';
 import {
     DropdownAppearance,
+    DropdownPosition,
     type DropdownPattern
 } from '../patterns/dropdown/types';
+import { anchoredRegionPositionToDropdownPosition } from '../patterns/dropdown/utility';
 import type { AnchoredRegion } from '../anchored-region';
 import { template } from './template';
 import { FormAssociatedCombobox } from './models/combobox-form-associated';
@@ -69,7 +78,7 @@ export class Combobox
      * The placement for the listbox when the combobox is open.
      */
     @attr({ attribute: 'position' })
-    public positionAttribute?: SelectPosition;
+    public positionAttribute?: DropdownPosition;
 
     /**
      * The open attribute.
@@ -92,7 +101,7 @@ export class Combobox
      * @public
      */
     @observable
-    public position?: SelectPosition;
+    public position?: DropdownPosition;
 
     /**
      * @internal
@@ -206,11 +215,7 @@ export class Combobox
     private valueBeforeTextUpdate?: string;
     private _value = '';
     private filter = '';
-
-    /**
-     * The initial state of the position attribute.
-     */
-    private forcedPosition = false;
+    private anchoredRegionNotifier?: Notifier;
 
     private get isAutocompleteInline(): boolean {
         return (
@@ -245,11 +250,10 @@ export class Combobox
 
     public override connectedCallback(): void {
         super.connectedCallback();
-        this.forcedPosition = !!this.positionAttribute;
         if (this.value) {
             this.initialValue = this.value;
         }
-        this.setPositioning();
+        this.updateAvailableViewportHeight();
         this.updateInputAriaLabel();
     }
 
@@ -620,35 +624,14 @@ export class Combobox
         }
     }
 
-    /**
-     * @internal
-     */
-    public setPositioning(): void {
-        // Workaround for https://github.com/microsoft/fast/issues/5123
-        if (!this.$fastController.isConnected) {
-            // Don't call setPositioning() until we're connected,
-            // since this.forcedPosition isn't initialized yet.
-            return;
-        }
-        const currentBox = this.getBoundingClientRect();
-        const viewportHeight = window.innerHeight;
-        const availableBottom = viewportHeight - currentBox.bottom;
-
-        if (this.forcedPosition) {
-            this.position = this.positionAttribute;
-        } else if (currentBox.top > availableBottom) {
-            this.position = SelectPosition.above;
-        } else {
-            this.position = SelectPosition.below;
+    /* @internal */
+    public override handleChange(source: unknown, propertyName: string): void {
+        super.handleChange(source, propertyName);
+        if (propertyName === 'verticalPosition') {
+            this.position = anchoredRegionPositionToDropdownPosition(
+                this.region?.verticalPosition
+            );
         }
-
-        this.positionAttribute = this.forcedPosition
-            ? this.positionAttribute
-            : this.position;
-
-        this.availableViewportHeight = this.position === SelectPosition.above
-            ? Math.trunc(currentBox.top)
-            : Math.trunc(availableBottom);
     }
 
     /**
@@ -678,7 +661,7 @@ export class Combobox
             this.ariaControls = this.listboxId;
             this.ariaExpanded = 'true';
 
-            this.setPositioning();
+            this.updateAvailableViewportHeight();
             this.focusAndScrollOptionIntoView();
 
             // focus is directed to the element when `open` is changed programmatically
@@ -729,19 +712,24 @@ export class Combobox
     }
 
     protected positionChanged(
-        _: SelectPosition | undefined,
-        next: SelectPosition | undefined
+        _prev: DropdownPosition | undefined,
+        _next: DropdownPosition | undefined
     ): void {
-        this.positionAttribute = next;
-        this.setPositioning();
+        this.updateAvailableViewportHeight();
     }
 
     private regionChanged(
         _prev: AnchoredRegion | undefined,
         _next: AnchoredRegion | undefined
     ): void {
+        if (this.anchoredRegionNotifier) {
+            this.anchoredRegionNotifier?.unsubscribe(this, 'verticalPosition');
+            this.anchoredRegionNotifier = undefined;
+        }
         if (this.region && this.controlWrapper) {
             this.region.anchorElement = this.controlWrapper;
+            this.anchoredRegionNotifier = Observable.getNotifier(this.region);
+            this.anchoredRegionNotifier.subscribe(this, 'verticalPosition');
         }
     }
 
@@ -759,6 +747,29 @@ export class Combobox
         this.updateInputAriaLabel();
     }
 
+    private updateAvailableViewportHeight(): void {
+        const currentBox = this.getBoundingClientRect();
+        const viewportHeight = document.documentElement.getBoundingClientRect().height;
+        const availableSpaceAbove = Math.trunc(currentBox.top);
+        const availableSpaceBelow = Math.trunc(
+            viewportHeight - currentBox.bottom
+        );
+
+        switch (this.positionAttribute) {
+            case DropdownPosition.above:
+                this.availableViewportHeight = availableSpaceAbove;
+                break;
+            case DropdownPosition.below:
+                this.availableViewportHeight = availableSpaceBelow;
+                break;
+            default:
+                this.availableViewportHeight = Math.max(
+                    availableSpaceAbove,
+                    availableSpaceBelow
+                );
+        }
+    }
+
     /**
      * Sets the value and to match the first selected option.
      */
diff --git a/packages/nimble-components/src/combobox/template.ts b/packages/nimble-components/src/combobox/template.ts
index c4eacb369c..a4f37a7eaf 100644
--- a/packages/nimble-components/src/combobox/template.ts
+++ b/packages/nimble-components/src/combobox/template.ts
@@ -28,7 +28,7 @@ ComboboxOptions
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
-        class="${x => (x.open ? 'open' : '')} ${x => (x.disabled ? 'disabled' : '')} ${x => x.position}"
+        class="${x => (x.open ? 'open' : '')} ${x => (x.disabled ? 'disabled' : '')} ${x => x.position || ''}"
         ?open="${x => x.open}"
         tabindex="${x => (!x.disabled ? '0' : null)}"
         @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
@@ -70,7 +70,7 @@ ComboboxOptions
         </div>
         <${anchoredRegionTag}
             ${ref('region')}
-            class="anchored-region"
+            class="anchored-region confined-to-view"
             fixed-placement
             auto-update-mode="auto"
             vertical-default-position="${x => (x.positionAttribute === DropdownPosition.above ? 'top' : 'bottom')}"
diff --git a/packages/nimble-components/src/combobox/testing/combobox.pageobject.ts b/packages/nimble-components/src/combobox/testing/combobox.pageobject.ts
index a37b281145..3c9ab0e5b4 100644
--- a/packages/nimble-components/src/combobox/testing/combobox.pageobject.ts
+++ b/packages/nimble-components/src/combobox/testing/combobox.pageobject.ts
@@ -3,8 +3,8 @@ import type { Combobox } from '..';
 import { listOptionTag } from '../../list-option';
 import { waitForUpdatesAsync } from '../../testing/async-helpers';
 import {
-    waitForEvent,
-    waitAnimationFrame
+    waitAnimationFrame,
+    waitPredicate
 } from '../../utilities/testing/component';
 import { slotTextContent } from '../../utilities/models/slot-text-content';
 
@@ -13,11 +13,6 @@ import { slotTextContent } from '../../utilities/models/slot-text-content';
  * of querying and interacting with the component during tests.
  */
 export class ComboboxPageObject {
-    private readonly regionLoadedListener = waitForEvent(
-        this.comboboxElement,
-        'loaded'
-    );
-
     public constructor(protected readonly comboboxElement: Combobox) {}
 
     /**
@@ -31,7 +26,7 @@ export class ComboboxPageObject {
      * Sets the input text and commits the value by pressing Enter. Will emit a 'change' event.
      */
     public async commitValue(text: string): Promise<void> {
-        await this.waitForAnchoredRegionLoaded();
+        await this.waitForListboxPositioned();
         this.setInputText(text);
         this.pressEnterKey();
     }
@@ -76,7 +71,7 @@ export class ComboboxPageObject {
      */
     public async clickAndWaitForOpen(): Promise<void> {
         this.clickCombobox();
-        await this.waitForAnchoredRegionLoaded();
+        await this.waitForListboxPositioned();
         await waitForUpdatesAsync();
         await waitAnimationFrame(); // necessary because scrolling is queued with requestAnimationFrame
     }
@@ -95,7 +90,7 @@ export class ComboboxPageObject {
      */
     public async clickDropdownButtonAndWaitForOpen(): Promise<void> {
         this.clickDropdownButton();
-        await this.waitForAnchoredRegionLoaded();
+        await this.waitForListboxPositioned();
         await waitAnimationFrame(); // necessary because scrolling is queued with requestAnimationFrame
     }
 
@@ -219,7 +214,14 @@ export class ComboboxPageObject {
         );
     }
 
-    private async waitForAnchoredRegionLoaded(): Promise<void> {
-        await this.regionLoadedListener;
+    /**
+     * @internal
+     */
+    public async waitForListboxPositioned(): Promise<void> {
+        await waitPredicate(
+            () => this.comboboxElement.region?.classList.contains(
+                'horizontal-center'
+            ) === true
+        );
     }
 }
diff --git a/packages/nimble-components/src/combobox/tests/combobox.spec.ts b/packages/nimble-components/src/combobox/tests/combobox.spec.ts
index 98ca34b24f..ab6320f870 100644
--- a/packages/nimble-components/src/combobox/tests/combobox.spec.ts
+++ b/packages/nimble-components/src/combobox/tests/combobox.spec.ts
@@ -508,7 +508,7 @@ describe('Combobox', () => {
         it('should set classes based on open, disabled, and position', async () => {
             const { element, connect, disconnect } = await setup();
             await connect();
-            await waitForUpdatesAsync();
+            await new ComboboxPageObject(element).waitForListboxPositioned();
 
             expect(element.classList.contains('open')).toBeTrue();
             expect(element.classList.contains('disabled')).toBeTrue();
diff --git a/packages/nimble-components/src/patterns/dropdown/styles.ts b/packages/nimble-components/src/patterns/dropdown/styles.ts
index 65fe892686..54327b1e03 100644
--- a/packages/nimble-components/src/patterns/dropdown/styles.ts
+++ b/packages/nimble-components/src/patterns/dropdown/styles.ts
@@ -202,12 +202,9 @@ export const styles = css`
         margin-inline-start: auto;
     }
 
-    :host([open][position='above']) .anchored-region {
-        padding-bottom: ${smallPadding};
-    }
-
-    :host([open][position='below']) .anchored-region {
+    :host([open]) .anchored-region {
         padding-top: ${smallPadding};
+        padding-bottom: ${smallPadding};
     }
 
     .listbox {
@@ -215,29 +212,45 @@ export const styles = css`
         flex-direction: column;
         width: 100%;
         --ni-private-listbox-visible-option-count: 10.5;
+        --ni-private-listbox-minimum-visible-option-count: 1.5;
         --ni-private-listbox-anchor-element-gap: ${smallPadding};
         --ni-private-listbox-padding: ${smallPadding};
         --ni-private-listbox-filter-height: 0px;
         --ni-private-listbox-loading-indicator-height: 0px;
-        max-height: min(
-            calc(
-                var(--ni-private-listbox-anchor-element-gap) + 
-                2 * ${borderWidth} + 
-                var(--ni-private-listbox-padding) +
-                ${controlHeight} * var(--ni-private-listbox-visible-option-count) +
-                var(--ni-private-listbox-filter-height) +
-                var(--ni-private-listbox-loading-indicator-height)
-            ),
-            calc(
-                var(--ni-private-listbox-available-viewport-height) - 
-                var(--ni-private-listbox-anchor-element-gap)
-            )
+        --ni-private-listbox-boilerplate-height: calc(
+            var(--ni-private-listbox-anchor-element-gap) + 
+            2 * ${borderWidth} + 
+            var(--ni-private-listbox-padding) +
+            var(--ni-private-listbox-filter-height) +
+            var(--ni-private-listbox-loading-indicator-height)
+        );
+        --ni-private-listbox-ideal-height: calc(
+            var(--ni-private-listbox-boilerplate-height) +
+            ${controlHeight} * var(--ni-private-listbox-visible-option-count)
         );
+        --ni-private-listbox-minimum-height: calc(
+            var(--ni-private-listbox-boilerplate-height) +
+            ${controlHeight} * var(--ni-private-listbox-minimum-visible-option-count)
+        );
+        max-height: var(--ni-private-listbox-ideal-height);
         box-shadow: ${elevation2BoxShadow};
         border: ${borderWidth} solid ${popupBorderColor};
         background-color: ${applicationBackgroundColor};
     }
 
+    .anchored-region.confined-to-view .listbox {
+        max-height: max(
+            min(
+                var(--ni-private-listbox-ideal-height),
+                calc(
+                    var(--ni-private-listbox-available-viewport-height) - 
+                    var(--ni-private-listbox-anchor-element-gap)
+                )
+            ),
+            var(--ni-private-listbox-minimum-height)
+        );
+    }
+
     .listbox:has(.filter-field) {
         --ni-private-listbox-filter-height: ${controlHeight};
     }
@@ -246,12 +259,12 @@ export const styles = css`
         --ni-private-listbox-loading-indicator-height: ${controlHeight};
     }
 
-    :host([open][position='above']) .listbox {
+    :host([open]) .listbox.top{
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }
 
-    :host([open][position='below']) .listbox {
+    :host([open]) .listbox.bottom{
         border-top-left-radius: 0;
         border-top-right-radius: 0;
     }
diff --git a/packages/nimble-components/src/patterns/dropdown/utility.ts b/packages/nimble-components/src/patterns/dropdown/utility.ts
new file mode 100644
index 0000000000..ff1c892a61
--- /dev/null
+++ b/packages/nimble-components/src/patterns/dropdown/utility.ts
@@ -0,0 +1,10 @@
+import type { AnchoredRegionPositionLabel } from '@ni/fast-foundation';
+import { DropdownPosition } from './types';
+
+export function anchoredRegionPositionToDropdownPosition(
+    anchoredRegionPosition?: AnchoredRegionPositionLabel
+): DropdownPosition {
+    return anchoredRegionPosition === 'start'
+        ? DropdownPosition.above
+        : DropdownPosition.below;
+}
diff --git a/packages/nimble-components/src/rich-text/mention-listbox/index.ts b/packages/nimble-components/src/rich-text/mention-listbox/index.ts
index e288d81d45..be7e85d605 100644
--- a/packages/nimble-components/src/rich-text/mention-listbox/index.ts
+++ b/packages/nimble-components/src/rich-text/mention-listbox/index.ts
@@ -36,8 +36,6 @@ export class RichTextMentionListbox extends FoundationListbox {
     public region?: AnchoredRegion;
 
     /**
-     * The space available in the viewport for the listbox when opened.
-     *
      * @internal
      */
     @observable
@@ -108,10 +106,7 @@ export class RichTextMentionListbox extends FoundationListbox {
      * @public
      */
     public show(options: MentionListboxShowOptions): void {
-        const listboxTop = options.anchorNode.getBoundingClientRect().bottom;
-        this.availableViewportHeight = Math.trunc(
-            window.innerHeight - listboxTop
-        );
+        this.updateAvailableViewportHeight();
         this.filter = options.filter;
         this.anchorElement = options.anchorNode;
         this.setOpen(true);
@@ -287,6 +282,19 @@ export class RichTextMentionListbox extends FoundationListbox {
     private setOpen(value: boolean): void {
         this.open = value;
     }
+
+    private updateAvailableViewportHeight(): void {
+        const currentBox = this.getBoundingClientRect();
+        const viewportHeight = document.documentElement.getBoundingClientRect().height;
+        const availableSpaceAbove = Math.trunc(currentBox.top);
+        const availableSpaceBelow = Math.trunc(
+            viewportHeight - currentBox.bottom
+        );
+        this.availableViewportHeight = Math.max(
+            availableSpaceAbove,
+            availableSpaceBelow
+        );
+    }
 }
 
 const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
diff --git a/packages/nimble-components/src/rich-text/mention-listbox/template.ts b/packages/nimble-components/src/rich-text/mention-listbox/template.ts
index a7fd972e05..8356de4c7e 100644
--- a/packages/nimble-components/src/rich-text/mention-listbox/template.ts
+++ b/packages/nimble-components/src/rich-text/mention-listbox/template.ts
@@ -10,11 +10,11 @@ export const template = html<RichTextMentionListbox>`
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
-            class="anchored-region"
+            class="anchored-region confined-to-view"
             fixed-placement
             auto-update-mode="auto"
             vertical-default-position="bottom"
-            vertical-positioning-mode="locktodefault"
+            vertical-positioning-mode="dynamic"
             horizontal-default-position="center"
             horizontal-positioning-mode="locktodefault"
             horizontal-scaling="anchor"
diff --git a/packages/nimble-components/src/rich-text/mention-listbox/tests/mention-listbox.spec.ts b/packages/nimble-components/src/rich-text/mention-listbox/tests/mention-listbox.spec.ts
index 3f349c3792..73c5084be8 100644
--- a/packages/nimble-components/src/rich-text/mention-listbox/tests/mention-listbox.spec.ts
+++ b/packages/nimble-components/src/rich-text/mention-listbox/tests/mention-listbox.spec.ts
@@ -4,8 +4,8 @@ import { waitForUpdatesAsync } from '../../../testing/async-helpers';
 import { type Fixture, fixture } from '../../../utilities/tests/fixture';
 import { listOptionTag } from '../../../list-option';
 import {
-    waitForEvent,
-    waitAnimationFrame
+    waitAnimationFrame,
+    waitPredicate
 } from '../../../utilities/testing/component';
 import { checkFullyInViewport } from '../../../utilities/tests/intersection-observer';
 
@@ -49,12 +49,13 @@ describe('RichTextMentionListbox', () => {
     }
 
     async function showAndWaitForOpen(filter = ''): Promise<void> {
-        const regionLoadedPromise = waitForEvent(element, 'loaded');
         element.show({
             anchorNode: anchor,
             filter
         });
-        await regionLoadedPromise;
+        await waitPredicate(
+            () => element.region?.classList.contains('horizontal-center') === true
+        );
     }
 
     beforeEach(async () => {
diff --git a/packages/nimble-components/src/select/index.ts b/packages/nimble-components/src/select/index.ts
index e6e5d2fe48..3ee11f80df 100644
--- a/packages/nimble-components/src/select/index.ts
+++ b/packages/nimble-components/src/select/index.ts
@@ -1,12 +1,18 @@
 // Based on: https://github.com/microsoft/fast/blob/%40microsoft/fast-foundation_v2.49.5/packages/web-components/fast-foundation/src/select/select.ts
-import { attr, html, observable, Observable, volatile } from '@ni/fast-element';
+import {
+    attr,
+    html,
+    observable,
+    Observable,
+    volatile,
+    type Notifier
+} from '@ni/fast-element';
 import {
     AnchoredRegion,
     DesignSystem,
     Select as FoundationSelect,
     ListboxOption,
     type SelectOptions,
-    SelectPosition,
     applyMixins,
     StartEnd,
     DelegatesARIASelect
@@ -26,8 +32,10 @@ import { arrowExpanderDown16X16 } from '@ni/nimble-tokens/dist/icons/js';
 import { styles } from './styles';
 import {
     DropdownAppearance,
+    DropdownPosition,
     type ListOptionOwner
 } from '../patterns/dropdown/types';
+import { anchoredRegionPositionToDropdownPosition } from '../patterns/dropdown/utility';
 import { errorTextTemplate } from '../patterns/error/template';
 import { mixinErrorPattern } from '../patterns/error/types';
 import { iconExclamationMarkTag } from '../icons/exclamation-mark';
@@ -83,7 +91,7 @@ export class Select
      * @public
      */
     @attr({ attribute: 'position' })
-    public positionAttribute?: SelectPosition;
+    public positionAttribute?: DropdownPosition;
 
     @attr({ attribute: 'filter-mode' })
     public filterMode: FilterMode = FilterMode.none;
@@ -112,7 +120,7 @@ export class Select
      * @public
      */
     @observable
-    public position?: SelectPosition;
+    public position?: DropdownPosition;
 
     /**
      * The ref to the internal `.control` element.
@@ -202,18 +210,18 @@ export class Select
     }
 
     private _value = '';
-    private forcedPosition = false;
     private openActiveIndex?: number;
     private readonly selectedOptionObserver? = new MutationObserver(() => {
         this.updateDisplayValue();
     });
 
+    private anchoredRegionNotifier?: Notifier;
+
     /**
      * @internal
      */
     public override connectedCallback(): void {
         super.connectedCallback();
-        this.forcedPosition = !!this.positionAttribute;
         if (this.open) {
             this.initializeOpenState();
         }
@@ -277,8 +285,16 @@ export class Select
         _prev: AnchoredRegion | undefined,
         _next: AnchoredRegion | undefined
     ): void {
+        if (this.anchoredRegionNotifier) {
+            this.anchoredRegionNotifier?.unsubscribe(this, 'verticalPosition');
+            this.anchoredRegionNotifier = undefined;
+        }
         if (this.anchoredRegion && this.control) {
             this.anchoredRegion.anchorElement = this.control;
+            this.anchoredRegionNotifier = Observable.getNotifier(
+                this.anchoredRegion
+            );
+            this.anchoredRegionNotifier.subscribe(this, 'verticalPosition');
         }
     }
 
@@ -435,6 +451,12 @@ export class Select
                 );
                 break;
             }
+            case 'verticalPosition': {
+                this.position = anchoredRegionPositionToDropdownPosition(
+                    this.anchoredRegion?.verticalPosition
+                );
+                break;
+            }
             default:
                 break;
         }
@@ -884,11 +906,10 @@ export class Select
     }
 
     protected positionChanged(
-        _: SelectPosition | undefined,
-        next: SelectPosition | undefined
+        _prev: DropdownPosition | undefined,
+        _next: DropdownPosition | undefined
     ): void {
-        this.positionAttribute = next;
-        this.setPositioning();
+        this.updateAvailableViewportHeight();
     }
 
     /**
@@ -1067,31 +1088,27 @@ export class Select
         return this.options.find(o => o.hidden && o.disabled) as ListOption;
     }
 
-    private setPositioning(): void {
-        if (!this.$fastController.isConnected) {
-            // Don't call setPositioning() until we're connected,
-            // since this.forcedPosition isn't initialized yet.
-            return;
-        }
+    private updateAvailableViewportHeight(): void {
         const currentBox = this.getBoundingClientRect();
-        const viewportHeight = window.innerHeight;
-        const availableBottom = viewportHeight - currentBox.bottom;
+        const viewportHeight = document.documentElement.getBoundingClientRect().height;
+        const availableSpaceAbove = Math.trunc(currentBox.top);
+        const availableSpaceBelow = Math.trunc(
+            viewportHeight - currentBox.bottom
+        );
 
-        if (this.forcedPosition) {
-            this.position = this.positionAttribute;
-        } else if (currentBox.top > availableBottom) {
-            this.position = SelectPosition.above;
-        } else {
-            this.position = SelectPosition.below;
+        switch (this.positionAttribute) {
+            case DropdownPosition.above:
+                this.availableViewportHeight = availableSpaceAbove;
+                break;
+            case DropdownPosition.below:
+                this.availableViewportHeight = availableSpaceBelow;
+                break;
+            default:
+                this.availableViewportHeight = Math.max(
+                    availableSpaceAbove,
+                    availableSpaceBelow
+                );
         }
-
-        this.positionAttribute = this.forcedPosition
-            ? this.positionAttribute
-            : this.position;
-
-        this.availableViewportHeight = this.position === SelectPosition.above
-            ? Math.trunc(currentBox.top)
-            : Math.trunc(availableBottom);
     }
 
     private updateAdjacentSeparatorState(
@@ -1303,7 +1320,7 @@ export class Select
         this.ariaControls = this.listboxId;
         this.ariaExpanded = 'true';
 
-        this.setPositioning();
+        this.updateAvailableViewportHeight();
         this.focusAndScrollOptionIntoView();
     }
 
diff --git a/packages/nimble-components/src/select/template.ts b/packages/nimble-components/src/select/template.ts
index 853eaad88c..d3430a5ce5 100644
--- a/packages/nimble-components/src/select/template.ts
+++ b/packages/nimble-components/src/select/template.ts
@@ -108,7 +108,7 @@ SelectOptions
         }
         <${anchoredRegionTag}
             ${ref('anchoredRegion')}
-            class="anchored-region"
+            class="anchored-region confined-to-view"
             fixed-placement
             auto-update-mode="auto"
             vertical-default-position="${x => (x.positionAttribute === DropdownPosition.above ? 'top' : 'bottom')}"
@@ -123,7 +123,7 @@ SelectOptions
                     class="
                         listbox
                         ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}
-                        ${x => x.positionAttribute}
+                        ${x => x.position || ''}
                     "
                     id="${x => x.listboxId}"
                     part="listbox"
@@ -133,7 +133,7 @@ SelectOptions
                     ${ref('listbox')}
                 >
                     ${when(x => x.filterMode !== FilterMode.none, html<Select>`
-                        <div class="filter-field ${x => x.positionAttribute}">
+                        <div class="filter-field ${x => x.position || ''}">
                             <${iconMagnifyingGlassTag} class="filter-icon"></${iconMagnifyingGlassTag}>
                             <input
                                 ${ref('filterInput')}
@@ -164,7 +164,7 @@ SelectOptions
                         `)}
                     </div>
                     ${when(x => x.loadingVisible, html<Select>`
-                        <div class="loading-container ${x => x.positionAttribute} ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}"
+                        <div class="loading-container ${x => x.position || ''} ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}"
                             @click="${(x, c) => x.ignoreClickHandler(c.event as MouseEvent)}">
                             <span class="loading-label">
                                 ${x => loadingLabel.getValueFor(x)}
diff --git a/packages/nimble-components/src/select/tests/select.spec.ts b/packages/nimble-components/src/select/tests/select.spec.ts
index 2ecbecf809..a62ee9a5d8 100644
--- a/packages/nimble-components/src/select/tests/select.spec.ts
+++ b/packages/nimble-components/src/select/tests/select.spec.ts
@@ -12,7 +12,8 @@ import { checkFullyInViewport } from '../../utilities/tests/intersection-observe
 import { FilterMode, type SelectFilterInputEventDetail } from '../types';
 import {
     waitForEvent,
-    waitAnimationFrame
+    waitAnimationFrame,
+    waitPredicate
 } from '../../utilities/testing/component';
 import { filterSearchLabel } from '../../label-provider/core/label-tokens';
 import { ListOptionGroup, listOptionGroupTag } from '../../list-option-group';
@@ -107,9 +108,11 @@ async function setupWithGroups(): Promise<Fixture<Select>> {
 }
 
 async function clickAndWaitForOpen(select: Select): Promise<void> {
-    const regionLoadedPromise = waitForEvent(select, 'loaded');
     select.click();
-    await regionLoadedPromise;
+    await waitPredicate(
+        () => select.anchoredRegion?.classList.contains('horizontal-center')
+            === true
+    );
 }
 
 describe('Select', () => {
@@ -939,7 +942,6 @@ describe('Select', () => {
             await connect();
             element.focus();
             await clickAndWaitForOpen(element);
-            await waitForUpdatesAsync();
             await waitAnimationFrame(); // necessary because scrolling is queued with requestAnimationFrame
 
             expect(element.scrollableRegion.scrollTop).toBeGreaterThan(8000);
diff --git a/packages/nimble-components/src/utilities/testing/component.ts b/packages/nimble-components/src/utilities/testing/component.ts
index 1c8bff39f4..522c261a53 100644
--- a/packages/nimble-components/src/utilities/testing/component.ts
+++ b/packages/nimble-components/src/utilities/testing/component.ts
@@ -79,3 +79,13 @@ export async function waitTimeout(ms = 0): Promise<void> {
         window.setTimeout(() => resolve(undefined), ms);
     });
 }
+
+/**
+ * Waits for a predicate function to return truthy value (polls in loop of waitForUpdatesAsync calls).
+ */
+export async function waitPredicate(predicate: () => boolean): Promise<void> {
+    while (!predicate()) {
+        // eslint-disable-next-line no-await-in-loop
+        await waitForUpdatesAsync();
+    }
+}
diff --git a/packages/nimble-components/src/utilities/tests/intersection-observer.ts b/packages/nimble-components/src/utilities/tests/intersection-observer.ts
index dfc9df997c..249d4d1884 100644
--- a/packages/nimble-components/src/utilities/tests/intersection-observer.ts
+++ b/packages/nimble-components/src/utilities/tests/intersection-observer.ts
@@ -17,10 +17,6 @@ export async function checkFullyInViewport(
                     resolve(false);
                 }
             },
-            // As of now, passing a document as root is not supported on Safari:
-            // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#browser_compatibility
-            // If we begin running these tests on Safari, we may need to skip those that use this function.
-            // This issue tracks expanding testing to Safari: https://github.com/ni/nimble/issues/990
             { threshold: 1.0, root: document }
         );
         intersectionObserver.observe(element);
diff --git a/packages/nimble-components/src/utilities/tests/setup-configuration.ts b/packages/nimble-components/src/utilities/tests/setup-configuration.ts
index 4f5c2bdbf5..072bfce3eb 100644
--- a/packages/nimble-components/src/utilities/tests/setup-configuration.ts
+++ b/packages/nimble-components/src/utilities/tests/setup-configuration.ts
@@ -6,3 +6,7 @@ console.error = (data: any): void => fail(data);
 // eslint-disable-next-line no-console, @typescript-eslint/no-explicit-any
 console.warn = (data: any): void => fail(data);
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
+// Headless Chrome is missing some styles on the document element.
+// Without this, the <html> element has a height of 8px, which can cause some tests to fail.
+document.documentElement.style.setProperty('height', '100%');
diff --git a/packages/storybook/src/nimble/combobox/combobox-opened-position.stories.ts b/packages/storybook/src/nimble/combobox/combobox-opened-position.stories.ts
new file mode 100644
index 0000000000..6fbf836fc7
--- /dev/null
+++ b/packages/storybook/src/nimble/combobox/combobox-opened-position.stories.ts
@@ -0,0 +1,74 @@
+import type { StoryFn, Meta } from '@storybook/html';
+import { html, repeat, ViewTemplate } from '@ni/fast-element';
+import {
+    borderWidth,
+    controlHeight,
+    smallPadding
+} from '@ni/nimble-components/src/theme-provider/design-tokens';
+import { listOptionTag } from '@ni/nimble-components/src/list-option';
+import { comboboxTag } from '@ni/nimble-components/src/combobox';
+import { createStory } from '../../utilities/storybook';
+import { sharedMatrixParameters } from '../../utilities/matrix';
+
+const metadata: Meta = {
+    title: 'Tests/Combobox',
+    parameters: {
+        ...sharedMatrixParameters()
+    }
+};
+
+export default metadata;
+
+const numListOptions = 3;
+
+// prettier-ignore
+const component = (
+    aboveTooSmallByPixels: number,
+    belowTooSmallByPixels: number
+): ViewTemplate => html`
+    <style>
+        body.sb-show-main.sb-main-padded {
+            padding: 0px;
+        }
+    </style>
+    <div
+        style="--ni-private-dropdown-delta-height: calc(
+                ${numListOptions} * var(${controlHeight.cssCustomProperty}) +
+                2 * (var(${smallPadding.cssCustomProperty}) + var(${borderWidth.cssCustomProperty})) +
+                var(${smallPadding.cssCustomProperty})
+            );
+            height: calc(2 * var(--ni-private-dropdown-delta-height) - ${aboveTooSmallByPixels + belowTooSmallByPixels}px + var(${controlHeight.cssCustomProperty}));
+            width: fit-content;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-bottom: 2px solid green;"
+    >
+        <${comboboxTag}
+            open
+            style="margin-top: calc(var(--ni-private-dropdown-delta-height) - ${aboveTooSmallByPixels}px);"
+        >
+            ${repeat(() => [...Array(numListOptions).keys()], html<number>`
+                <${listOptionTag} value="${x => x}">Option ${x => x + 1}</${listOptionTag}>
+            `)}
+        </${comboboxTag}>
+    </div>
+`;
+
+export const openDefault$SufficientSpaceAboveAndBelow: StoryFn = createStory(
+    component(0, 0)
+);
+export const openDefault$SufficientSpaceAboveButNotBelow: StoryFn = createStory(
+    component(0, 40)
+);
+export const openDefault$SufficientSpaceBelowButNotAbove: StoryFn = createStory(
+    component(40, 0)
+);
+export const openDefault$AboveAndBelowEquallyTooSmall: StoryFn = createStory(
+    component(40, 40)
+);
+export const openDefault$BothTooSmallButMoreSpaceBelow: StoryFn = createStory(
+    component(80, 40)
+);
+export const openDefault$BothTooSmallButMoreSpaceAbove: StoryFn = createStory(
+    component(40, 80)
+);
diff --git a/packages/storybook/src/nimble/combobox/combobox.stories.ts b/packages/storybook/src/nimble/combobox/combobox.stories.ts
index 57f09cbd99..a52278589d 100644
--- a/packages/storybook/src/nimble/combobox/combobox.stories.ts
+++ b/packages/storybook/src/nimble/combobox/combobox.stories.ts
@@ -142,8 +142,14 @@ const metadata: Meta<ComboboxArgs> = {
         },
         dropDownPosition: {
             name: 'position',
-            options: [DropdownPosition.above, DropdownPosition.below],
-            control: { type: 'select' },
+            options: [undefined, ...Object.values(DropdownPosition)],
+            type: 'string',
+            control: {
+                type: 'radio',
+                labels: {
+                    undefined: 'default'
+                }
+            },
             description: dropdownPositionDescription({
                 componentName: 'combobox'
             }),
@@ -222,7 +228,7 @@ const metadata: Meta<ComboboxArgs> = {
     args: {
         label: 'Combobox',
         disabled: false,
-        dropDownPosition: 'below',
+        dropDownPosition: undefined,
         autocomplete: ComboboxAutocomplete.both,
         errorVisible: false,
         errorText: 'Value is invalid',
diff --git a/packages/storybook/src/nimble/rich-text/mention-listbox/mention-listbox-position.stories.ts b/packages/storybook/src/nimble/rich-text/mention-listbox/mention-listbox-position.stories.ts
new file mode 100644
index 0000000000..9b2ef79465
--- /dev/null
+++ b/packages/storybook/src/nimble/rich-text/mention-listbox/mention-listbox-position.stories.ts
@@ -0,0 +1,97 @@
+import type { StoryFn, Meta } from '@storybook/html';
+import { html, repeat, ViewTemplate } from '@ni/fast-element';
+import {
+    bodyFont,
+    bodyFontLineHeight,
+    borderWidth,
+    controlHeight,
+    smallPadding
+} from '@ni/nimble-components/src/theme-provider/design-tokens';
+import { listOptionTag } from '@ni/nimble-components/src/list-option';
+import { richTextMentionListboxTag } from '@ni/nimble-components/src/rich-text/mention-listbox';
+import { sharedMatrixParameters } from '../../../utilities/matrix';
+import { createStory } from '../../../utilities/storybook';
+
+const metadata: Meta = {
+    title: 'Tests/Rich Text Mention Listbox',
+    parameters: {
+        ...sharedMatrixParameters()
+    }
+};
+
+export default metadata;
+
+const numListOptions = 3;
+
+const playFunction = (): void => {
+    const anchor = document.querySelector('.anchor');
+    const listbox = document.querySelector(richTextMentionListboxTag)!;
+    listbox.show({
+        anchorNode: anchor as HTMLElement,
+        filter: ''
+    });
+};
+
+// prettier-ignore
+const component = (
+    aboveTooSmallByPixels: number,
+    belowTooSmallByPixels: number
+): ViewTemplate => html`
+    <style>
+        body.sb-show-main.sb-main-padded {
+            padding: 0px;
+        }
+    </style>
+    <div
+        style="--ni-private-dropdown-delta-height: calc(
+                ${numListOptions} * var(${controlHeight.cssCustomProperty}) +
+                2 * (var(${smallPadding.cssCustomProperty}) + var(${borderWidth.cssCustomProperty}))
+            );
+            height: calc(2 * var(--ni-private-dropdown-delta-height) - ${aboveTooSmallByPixels + belowTooSmallByPixels}px + var(${bodyFontLineHeight.cssCustomProperty}));
+            width: fit-content;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-bottom: 2px solid green;"
+    >
+        <div
+            class='anchor'
+            style="
+                display: inline-block;
+                margin-top: calc(var(--ni-private-dropdown-delta-height) - ${aboveTooSmallByPixels}px);
+                font: var(${bodyFont.cssCustomProperty});
+            "
+        >@</div>
+        <${richTextMentionListboxTag}
+            stylez="height: var(--ni-private-dropdown-delta-height);"
+        >
+            ${repeat(() => [...Array(numListOptions).keys()], html<number>`
+                <${listOptionTag} value="${x => x}">Option ${x => x + 1}</${listOptionTag}>
+            `)}
+        </${richTextMentionListboxTag}>
+    </div>
+`;
+
+export const sufficientSpaceAboveAndBelow: StoryFn = createStory(
+    component(0, 0)
+);
+sufficientSpaceAboveAndBelow.play = playFunction;
+export const sufficientSpaceAboveButNotBelow: StoryFn = createStory(
+    component(0, 40)
+);
+sufficientSpaceAboveButNotBelow.play = playFunction;
+export const sufficientSpaceBelowButNotAbove: StoryFn = createStory(
+    component(40, 0)
+);
+sufficientSpaceBelowButNotAbove.play = playFunction;
+export const aboveAndBelowEquallyTooSmall: StoryFn = createStory(
+    component(40, 40)
+);
+aboveAndBelowEquallyTooSmall.play = playFunction;
+export const bothTooSmallButMoreSpaceBelow: StoryFn = createStory(
+    component(80, 40)
+);
+bothTooSmallButMoreSpaceBelow.play = playFunction;
+export const bothTooSmallButMoreSpaceAbove: StoryFn = createStory(
+    component(40, 80)
+);
+bothTooSmallButMoreSpaceAbove.play = playFunction;
diff --git a/packages/storybook/src/nimble/select/select-matrix.stories.ts b/packages/storybook/src/nimble/select/select-matrix.stories.ts
index eae2fd3691..6c8dcbe8a0 100644
--- a/packages/storybook/src/nimble/select/select-matrix.stories.ts
+++ b/packages/storybook/src/nimble/select/select-matrix.stories.ts
@@ -212,17 +212,20 @@ const playFunction = async (): Promise<void> => {
 };
 
 export const navigateToDifferentOption: StoryFn = createStory(
-    html`<${selectTag} open style="width: 250px;">
-        <${listOptionTag} value="1" selected>Option 1</${listOptionTag}>
-        <${listOptionTag}>Option 2</${listOptionTag}>
-    </${selectTag}>`
+    html`
+    <div style="height: 130px; width: 250px;">
+        <${selectTag} open style="width: 250px;">
+            <${listOptionTag} value="1" selected>Option 1</${listOptionTag}>
+            <${listOptionTag}>Option 2</${listOptionTag}>
+        </${selectTag}>
+    </div>`
 );
 
 navigateToDifferentOption.play = playFunction;
 
 export const navigateToDifferentOptionWithGroups: StoryFn = createStory(
     html`
-    <div style="height: 250px;">
+    <div style="height: 130px; width: 250px;">
         <${selectTag} open style="width: 250px;">
             <${listOptionGroupTag} label="Group 1">
                 <${listOptionTag} value="1" selected>Option 1</${listOptionTag}>
diff --git a/packages/storybook/src/nimble/select/select-opened-position.stories.ts b/packages/storybook/src/nimble/select/select-opened-position.stories.ts
new file mode 100644
index 0000000000..7bd1b1f0d1
--- /dev/null
+++ b/packages/storybook/src/nimble/select/select-opened-position.stories.ts
@@ -0,0 +1,74 @@
+import type { StoryFn, Meta } from '@storybook/html';
+import { html, repeat, ViewTemplate } from '@ni/fast-element';
+import {
+    borderWidth,
+    controlHeight,
+    smallPadding
+} from '@ni/nimble-components/src/theme-provider/design-tokens';
+import { listOptionTag } from '@ni/nimble-components/src/list-option';
+import { selectTag } from '@ni/nimble-components/src/select';
+import { createStory } from '../../utilities/storybook';
+import { sharedMatrixParameters } from '../../utilities/matrix';
+
+const metadata: Meta = {
+    title: 'Tests/Select',
+    parameters: {
+        ...sharedMatrixParameters()
+    }
+};
+
+export default metadata;
+
+const numListOptions = 3;
+
+// prettier-ignore
+const component = (
+    aboveTooSmallByPixels: number,
+    belowTooSmallByPixels: number
+): ViewTemplate => html`
+    <style>
+        body.sb-show-main.sb-main-padded {
+            padding: 0px;
+        }
+    </style>
+    <div
+        style="--ni-private-dropdown-delta-height: calc(
+                ${numListOptions} * var(${controlHeight.cssCustomProperty}) +
+                2 * (var(${smallPadding.cssCustomProperty}) + var(${borderWidth.cssCustomProperty})) +
+                var(${smallPadding.cssCustomProperty})
+            );
+            height: calc(2 * var(--ni-private-dropdown-delta-height) - ${aboveTooSmallByPixels + belowTooSmallByPixels}px + var(${controlHeight.cssCustomProperty}));
+            width: fit-content;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-bottom: 2px solid green;"
+    >
+        <${selectTag}
+            open
+            style="margin-top: calc(var(--ni-private-dropdown-delta-height) - ${aboveTooSmallByPixels}px);"
+        >
+            ${repeat(() => [...Array(numListOptions).keys()], html<number>`
+                <${listOptionTag} value="${x => x}">Option ${x => x + 1}</${listOptionTag}>
+            `)}
+        </${selectTag}>
+    </div>
+`;
+
+export const openDefault$SufficientSpaceAboveAndBelow: StoryFn = createStory(
+    component(0, 0)
+);
+export const openDefault$SufficientSpaceAboveButNotBelow: StoryFn = createStory(
+    component(0, 40)
+);
+export const openDefault$SufficientSpaceBelowButNotAbove: StoryFn = createStory(
+    component(40, 0)
+);
+export const openDefault$AboveAndBelowEquallyTooSmall: StoryFn = createStory(
+    component(40, 40)
+);
+export const openDefault$BothTooSmallButMoreSpaceBelow: StoryFn = createStory(
+    component(80, 40)
+);
+export const openDefault$BothTooSmallButMoreSpaceAbove: StoryFn = createStory(
+    component(40, 80)
+);
diff --git a/packages/storybook/src/nimble/select/select.stories.ts b/packages/storybook/src/nimble/select/select.stories.ts
index 4d42ae2213..3d081db383 100644
--- a/packages/storybook/src/nimble/select/select.stories.ts
+++ b/packages/storybook/src/nimble/select/select.stories.ts
@@ -5,7 +5,10 @@ import { listOptionTag } from '@ni/nimble-components/dist/esm/list-option';
 import { listOptionGroupTag } from '@ni/nimble-components/dist/esm/list-option-group';
 import { selectTag } from '@ni/nimble-components/dist/esm/select';
 import { FilterMode } from '@ni/nimble-components/dist/esm/select/types';
-import { DropdownAppearance } from '@ni/nimble-components/dist/esm/patterns/dropdown/types';
+import {
+    DropdownAppearance,
+    DropdownPosition
+} from '@ni/nimble-components/dist/esm/patterns/dropdown/types';
 
 import {
     apiCategory,
@@ -191,8 +194,14 @@ const metadata: Meta<SelectArgs> = {
         },
         dropDownPosition: {
             name: 'position',
-            options: ['above', 'below'],
-            control: { type: 'select' },
+            options: [undefined, ...Object.values(DropdownPosition)],
+            type: 'string',
+            control: {
+                type: 'radio',
+                labels: {
+                    undefined: 'default'
+                }
+            },
             description: dropdownPositionDescription({
                 componentName: 'select'
             }),
@@ -296,7 +305,7 @@ const metadata: Meta<SelectArgs> = {
         errorVisible: false,
         errorText: 'Value is invalid',
         filterMode: 'none',
-        dropDownPosition: 'below',
+        dropDownPosition: undefined,
         appearance: DropdownAppearance.underline,
         optionsType: ExampleOptionsType.simpleOptions,
         clearable: false,
diff --git a/packages/storybook/src/utilities/storybook.ts b/packages/storybook/src/utilities/storybook.ts
index 872aab1ee4..1c7ae2302b 100644
--- a/packages/storybook/src/utilities/storybook.ts
+++ b/packages/storybook/src/utilities/storybook.ts
@@ -207,7 +207,7 @@ export const requiredVisibleDescription = 'When set to `true`, an indicator will
 
 export const dropdownPositionDescription = (options: {
     componentName: string
-}): string => `Controls the position of the dropdown relative to the ${options.componentName}.`;
+}): string => `Controls the position of the dropdown relative to the ${options.componentName}. If unset, defaults to opening below when there is enough space, otherwise opens to the side that has more space.`;
 export const optionsDescription = (options: {
     includeGrouping: boolean
 }): string => `The \`${listOptionTag}\` items for the user to select from.${options.includeGrouping ? ` Each ${listOptionTag} can also be grouped using the \`${listOptionGroupTag}\` element.` : ''} `;