diff --git a/change/@fluentui-web-components-2020-08-12-11-41-04-master.json b/change/@fluentui-web-components-2020-08-12-11-41-04-master.json
new file mode 100644
index 00000000000000..1216e9f750ab12
--- /dev/null
+++ b/change/@fluentui-web-components-2020-08-12-11-41-04-master.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix: add full width to text-area and text-field controls to expand properly with component",
+  "packageName": "@fluentui/web-components",
+  "email": "sethdonohue@Admins-MBP.guest.corp.microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T18:41:04.074Z"
+}
diff --git a/packages/web-components/src/text-area/fixtures/text-area.html b/packages/web-components/src/text-area/fixtures/text-area.html
index e3ff35b69535c7..1c7db764477564 100644
--- a/packages/web-components/src/text-area/fixtures/text-area.html
+++ b/packages/web-components/src/text-area/fixtures/text-area.html
@@ -6,6 +6,9 @@ <h4>Default</h4>
     <span>label</span>
   </fluent-text-area>
 
+  <h4>Full Width</h4>
+  <fluent-text-area style="width: 100%;"></fluent-text-area>
+
   <h4>Placeholder</h4>
   <fluent-text-area placeholder="Placeholder"></fluent-text-area>
 
diff --git a/packages/web-components/src/text-area/text-area.stories.ts b/packages/web-components/src/text-area/text-area.stories.ts
index 94f05a22966b9f..a164b76b98ce04 100644
--- a/packages/web-components/src/text-area/text-area.stories.ts
+++ b/packages/web-components/src/text-area/text-area.stories.ts
@@ -7,7 +7,7 @@ FluentTextArea;
 FluentDesignSystemProvider;
 
 export default {
-  title: 'Text area',
+  title: 'Text Area',
 };
 
 export const TextArea = (): string => Examples;
diff --git a/packages/web-components/src/text-area/text-area.styles.ts b/packages/web-components/src/text-area/text-area.styles.ts
index d3da2e53c1ad0a..1c8ac196f004bb 100644
--- a/packages/web-components/src/text-area/text-area.styles.ts
+++ b/packages/web-components/src/text-area/text-area.styles.ts
@@ -31,7 +31,7 @@ export const TextAreaStyles = css`
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
         padding: calc(var(--design-unit) * 1.5px) calc(var(--design-unit) * 2px + 1px);
-        max-width: 100%;
+        width: 100%;
         resize: none;
     }
 
diff --git a/packages/web-components/src/text-field/fixtures/text-field.html b/packages/web-components/src/text-field/fixtures/text-field.html
index 5466d1c5bf5393..46d7fbee5181da 100644
--- a/packages/web-components/src/text-field/fixtures/text-field.html
+++ b/packages/web-components/src/text-field/fixtures/text-field.html
@@ -4,6 +4,9 @@ <h4>Default</h4>
   <fluent-text-field></fluent-text-field>
   <fluent-text-field>Label</fluent-text-field>
 
+  <h4>Full Width</h4>
+  <fluent-text-field style="width: 100%;"></fluent-text-field>
+
   <h4>Placeholder</h4>
   <fluent-text-field placeholder="Placeholder"></fluent-text-field>
 
diff --git a/packages/web-components/src/text-field/text-field.styles.ts b/packages/web-components/src/text-field/text-field.styles.ts
index 6af9b3cdfc7427..134aeeebffc581 100644
--- a/packages/web-components/src/text-field/text-field.styles.ts
+++ b/packages/web-components/src/text-field/text-field.styles.ts
@@ -37,6 +37,7 @@ export const TextFieldStyles = css`
         background: transparent;
         border: 0;
         height: calc(100% - 4px);
+        width: 100%;
         margin-top: auto;
         margin-bottom: auto;
         border: none;