diff --git a/change/@fluentui-web-components-28a4b6f4-8db1-47a6-a43e-11e4b4d8b10f.json b/change/@fluentui-web-components-28a4b6f4-8db1-47a6-a43e-11e4b4d8b10f.json
new file mode 100644
index 0000000000000..e59c384b6d215
--- /dev/null
+++ b/change/@fluentui-web-components-28a4b6f4-8db1-47a6-a43e-11e4b4d8b10f.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add constrained width dropdown story",
+  "packageName": "@fluentui/web-components",
+  "email": "brianbrady@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/web-components/src/dropdown/dropdown.stories.ts b/packages/web-components/src/dropdown/dropdown.stories.ts
index 3bb215087a2b1..a4bac631fd222 100644
--- a/packages/web-components/src/dropdown/dropdown.stories.ts
+++ b/packages/web-components/src/dropdown/dropdown.stories.ts
@@ -124,6 +124,32 @@ export const MultipleSelection: Story = {
   },
 };
 
+export const MultipleSelectionConstrainedWidth: Story = {
+  render: renderComponent(html<StoryArgs<FluentDropdown>>`
+    <fluent-field>
+      <label slot="label">${story => story.placeholder}</label>
+      <fluent-dropdown slot="input" ?multiple="${story => story.multiple}" style="width: 280px" ${ref('dropdown')}>
+        <fluent-listbox>${repeat(story => story.slottedContent?.(), optionTemplate)}</fluent-listbox>
+      </fluent-dropdown>
+    </fluent-field>
+  `),
+  args: {
+    multiple: true,
+    placeholder: 'Best pet',
+    slottedContent: () => [
+      { selected: true, value: 'cat', slottedContent: () => 'Cat' },
+      { selected: true, value: 'dog', slottedContent: () => 'Dog' },
+      { selected: true, value: 'fish', slottedContent: () => 'Fish' },
+      { selected: true, value: 'hamster', slottedContent: () => 'Hamster' },
+      { selected: true, value: 'snake', slottedContent: () => 'Snake' },
+      { selected: true, value: 'bird', slottedContent: () => 'Bird' },
+      { selected: true, value: 'wolf', slottedContent: () => 'Wolf' },
+      { selected: true, value: 'beetle', slottedContent: () => 'Beetle' },
+      { selected: true, value: 'squirrel', slottedContent: () => 'Squirrel' },
+    ],
+  },
+};
+
 export const Small: Story = {
   args: {
     ...Default.args,