diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3d21fee81f0..268f91b2e30 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,10 @@
 - Added `zIndexAdjustment` to `EuiPopover` which allows tweaking the popover content's `z-index` ([#1097](https://github.com/elastic/eui/pull/1097))
 - Added new `EuiSuperSelect` component and `hasArrow` prop to `EuiPopover` ([#921](https://github.com/elastic/eui/pull/921))
 
+**Bug fixes**
+
+- `EuiFlyout` responsive mode now gracefully overrides a custom `maxWidth` ([#1124](https://github.com/elastic/eui/pull/1124)
+
 ## [`3.6.1`](https://github.com/elastic/eui/tree/v3.6.1)
 
 - Added TypeScript definition for `findTestSubject` test util ([#1106](https://github.com/elastic/eui/pull/1106))
diff --git a/src-docs/src/views/flyout/flyout.js b/src-docs/src/views/flyout/flyout.js
index 437860d156e..f5b26a87b7c 100644
--- a/src-docs/src/views/flyout/flyout.js
+++ b/src-docs/src/views/flyout/flyout.js
@@ -45,7 +45,7 @@ export class Flyout extends Component {
     const htmlCode = `<EuiFlyout ...>
   <EuiFlyoutHeader hasBorder>
     <EuiTitle size="m">
-      <h1></h1>
+      <h2></h2>
     </EuiTitle>
   </EuiFlyoutHeader>
   <EuiFlyoutBody>
@@ -62,9 +62,9 @@ export class Flyout extends Component {
         >
           <EuiFlyoutHeader hasBorder>
             <EuiTitle size="m">
-              <h1 id="flyoutTitle">
+              <h2 id="flyoutTitle">
                 A typical flyout
-              </h1>
+              </h2>
             </EuiTitle>
           </EuiFlyoutHeader>
           <EuiFlyoutBody>
@@ -85,7 +85,7 @@ export class Flyout extends Component {
     return (
       <div>
         <EuiButton onClick={this.showFlyout}>
-          Show Flyout
+          Show flyout
         </EuiButton>
 
         {flyout}
diff --git a/src-docs/src/views/flyout/flyout_complicated.js b/src-docs/src/views/flyout/flyout_complicated.js
index 81b4ecdcf01..706d263e5f1 100644
--- a/src-docs/src/views/flyout/flyout_complicated.js
+++ b/src-docs/src/views/flyout/flyout_complicated.js
@@ -159,9 +159,9 @@ export class FlyoutComplicated extends Component {
         >
           <EuiFlyoutHeader hasBorder>
             <EuiTitle size="m">
-              <h1 id="flyoutComplicatedTitle">
+              <h2 id="flyoutComplicatedTitle">
                 Flyout header
-              </h1>
+              </h2>
             </EuiTitle>
             <EuiSpacer size="s" />
             <EuiText color="subdued">
@@ -212,7 +212,7 @@ export class FlyoutComplicated extends Component {
     return (
       <div>
         <EuiButton onClick={this.showFlyout}>
-          Show Flyout
+          Show flyout
         </EuiButton>
 
         {flyout}
diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js
index ad91f436ec1..335ea4b0fa9 100644
--- a/src-docs/src/views/flyout/flyout_example.js
+++ b/src-docs/src/views/flyout/flyout_example.js
@@ -14,9 +14,17 @@ import { FlyoutComplicated } from './flyout_complicated';
 const flyoutComplicatedSource = require('!!raw-loader!./flyout_complicated');
 const flyoutComplicatedHtml = renderToHtml(FlyoutComplicated);
 
-import { FlyoutSize } from './flyout_size';
-const flyoutSizeSource = require('!!raw-loader!./flyout_size');
-const flyoutSizeHtml = renderToHtml(FlyoutSize);
+import { FlyoutSmall } from './flyout_small';
+const flyoutSmallSource = require('!!raw-loader!./flyout_small');
+const flyoutSmallHtml = renderToHtml(FlyoutSmall);
+
+import { FlyoutLarge } from './flyout_large';
+const flyoutLargeSource = require('!!raw-loader!./flyout_large');
+const flyoutLargeHtml = renderToHtml(FlyoutLarge);
+
+import { FlyoutMaxWidth } from './flyout_max_width';
+const flyoutMaxWidthSource = require('!!raw-loader!./flyout_max_width');
+const flyoutMaxWidthHtml = renderToHtml(FlyoutMaxWidth);
 
 export const FlyoutExample = {
   title: 'Flyout',
@@ -89,15 +97,15 @@ export const FlyoutExample = {
       demo: <FlyoutComplicated />,
     },
     {
-      title: 'Flyout sizing and focus',
+      title: 'Small flyout, ownFocus',
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: flyoutSizeSource,
+          code: flyoutSmallSource,
         },
         {
           type: GuideSectionTypes.HTML,
-          code: flyoutSizeHtml,
+          code: flyoutSmallHtml,
         },
       ],
       text: (
@@ -107,7 +115,46 @@ export const FlyoutExample = {
           also adds background overlay to reinforce your boundries.
         </p>
       ),
-      demo: <FlyoutSize />,
+      demo: <FlyoutSmall />,
+    },
+    {
+      title: 'Large flyout',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: flyoutLargeSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: flyoutLargeHtml,
+        },
+      ],
+      text: (
+        <p>
+          In this example, we set <EuiCode>size</EuiCode> to <EuiCode>l</EuiCode>.
+        </p>
+      ),
+      demo: <FlyoutLarge />,
+    },
+    {
+      title: 'maxWidth',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: flyoutMaxWidthSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: flyoutMaxWidthHtml,
+        },
+      ],
+      text: (
+        <p>
+          In this example, we set <EuiCode>maxWidth</EuiCode> to <EuiCode>448px</EuiCode>, to
+          set the width of the flyout at the ideal width for a form.
+        </p>
+      ),
+      demo: <FlyoutMaxWidth />,
     },
   ],
 };
diff --git a/src-docs/src/views/flyout/flyout_large.js b/src-docs/src/views/flyout/flyout_large.js
new file mode 100644
index 00000000000..77ab4cdbe19
--- /dev/null
+++ b/src-docs/src/views/flyout/flyout_large.js
@@ -0,0 +1,78 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiFlyoutBody,
+  EuiButton,
+  EuiText,
+  EuiTitle,
+} from '../../../../src/components';
+
+export class FlyoutLarge extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isFlyoutVisible: false,
+      isSwitchChecked: true,
+    };
+
+    this.closeFlyout = this.closeFlyout.bind(this);
+    this.showFlyout = this.showFlyout.bind(this);
+  }
+
+  onSwitchChange = () => {
+    this.setState({
+      isSwitchChecked: !this.state.isSwitchChecked,
+    });
+  }
+
+  closeFlyout() {
+    this.setState({ isFlyoutVisible: false });
+  }
+
+  showFlyout() {
+    this.setState({ isFlyoutVisible: true });
+  }
+
+  render() {
+
+    let flyout;
+    if (this.state.isFlyoutVisible) {
+      flyout = (
+        <EuiFlyout
+          onClose={this.closeFlyout}
+          size="l"
+          aria-labelledby="flyoutLargeTitle"
+        >
+          <EuiFlyoutHeader hasBorder>
+            <EuiTitle size="m">
+              <h2 id="flyoutLargeTitle">
+                A large flyout
+              </h2>
+            </EuiTitle>
+          </EuiFlyoutHeader>
+          <EuiFlyoutBody>
+            <EuiText>
+              <p>
+                The large flyout is very wide.
+              </p>
+            </EuiText>
+          </EuiFlyoutBody>
+        </EuiFlyout>
+      );
+    }
+    return (
+      <div>
+        <EuiButton onClick={this.showFlyout}>
+          Show large flyout
+        </EuiButton>
+
+        {flyout}
+      </div>
+    );
+  }
+}
diff --git a/src-docs/src/views/flyout/flyout_max_width.js b/src-docs/src/views/flyout/flyout_max_width.js
new file mode 100644
index 00000000000..67b3de88fb9
--- /dev/null
+++ b/src-docs/src/views/flyout/flyout_max_width.js
@@ -0,0 +1,128 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiButton,
+  EuiText,
+  EuiTitle,
+  EuiFieldText,
+  EuiForm,
+  EuiFormRow,
+  EuiFilePicker,
+  EuiRange,
+  EuiSelect,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export class FlyoutMaxWidth extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isFlyoutVisible: false,
+      isSwitchChecked: true,
+    };
+
+    this.closeFlyout = this.closeFlyout.bind(this);
+    this.showFlyout = this.showFlyout.bind(this);
+  }
+
+  onSwitchChange = () => {
+    this.setState({
+      isSwitchChecked: !this.state.isSwitchChecked,
+    });
+  }
+
+  closeFlyout() {
+    this.setState({ isFlyoutVisible: false });
+  }
+
+  showFlyout() {
+    this.setState({ isFlyoutVisible: true });
+  }
+
+  render() {
+    let flyout;
+
+    if (this.state.isFlyoutVisible) {
+      flyout = (
+        <EuiFlyout
+          onClose={this.closeFlyout}
+          aria-labelledby="flyoutMaxWidthTitle"
+          maxWidth={448}
+        >
+          <EuiFlyoutHeader hasBorder>
+            <EuiTitle size="m">
+              <h2 id="flyoutMaxWidthTitle">
+                448px wide flyout
+              </h2>
+            </EuiTitle>
+          </EuiFlyoutHeader>
+          <EuiFlyoutBody>
+            <EuiText>
+              <p>
+                In many cases, you&rsquo;ll want to set a custom width that&rdquo;s tailored to your content.
+                In this case, the flyout is an ideal width for form elements.
+              </p>
+            </EuiText>
+
+            <EuiSpacer />
+
+            <EuiForm>
+              <EuiFormRow
+                label="Text field"
+                helpText="I am some friendly help text."
+              >
+                <EuiFieldText name="first" />
+              </EuiFormRow>
+
+              <EuiFormRow
+                label="Select (with no initial selection)"
+              >
+                <EuiSelect
+                  hasNoInitialSelection
+                  options={[
+                    { value: 'option_one', text: 'Option one' },
+                    { value: 'option_two', text: 'Option two' },
+                    { value: 'option_three', text: 'Option three' },
+                  ]}
+                />
+              </EuiFormRow>
+
+              <EuiFormRow
+                label="File picker"
+              >
+                <EuiFilePicker />
+              </EuiFormRow>
+
+              <EuiFormRow
+                label="Range"
+              >
+                <EuiRange
+                  min={0}
+                  max={100}
+                  name="range"
+                  id="range"
+                />
+              </EuiFormRow>
+            </EuiForm>
+          </EuiFlyoutBody>
+        </EuiFlyout>
+      );
+    }
+
+    return (
+      <div>
+        <EuiButton onClick={this.showFlyout}>
+          Show max-width flyout
+        </EuiButton>
+
+        {flyout}
+      </div>
+    );
+  }
+}
diff --git a/src-docs/src/views/flyout/flyout_size.js b/src-docs/src/views/flyout/flyout_small.js
similarity index 88%
rename from src-docs/src/views/flyout/flyout_size.js
rename to src-docs/src/views/flyout/flyout_small.js
index e774d0e1dbf..5cd16394f1d 100644
--- a/src-docs/src/views/flyout/flyout_size.js
+++ b/src-docs/src/views/flyout/flyout_small.js
@@ -11,7 +11,7 @@ import {
   EuiTitle,
 } from '../../../../src/components';
 
-export class FlyoutSize extends Component {
+export class FlyoutSmall extends Component {
   constructor(props) {
     super(props);
 
@@ -47,13 +47,13 @@ export class FlyoutSize extends Component {
           ownFocus
           onClose={this.closeFlyout}
           size="s"
-          aria-labelledby="flyoutSizeTitle"
+          aria-labelledby="flyoutSmallTitle"
         >
           <EuiFlyoutHeader hasBorder>
             <EuiTitle size="s">
-              <h1 id="flyoutSizeTitle">
+              <h2 id="flyoutSmallTitle">
                 A small flyout
-              </h1>
+              </h2>
             </EuiTitle>
           </EuiFlyoutHeader>
           <EuiFlyoutBody>
@@ -69,7 +69,7 @@ export class FlyoutSize extends Component {
     return (
       <div>
         <EuiButton onClick={this.showFlyout}>
-          Show Flyout
+          Show small flyout
         </EuiButton>
 
         {flyout}
diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss
index b10ebc707be..c06df9963e6 100644
--- a/src/components/flyout/_flyout.scss
+++ b/src/components/flyout/_flyout.scss
@@ -24,8 +24,7 @@
 }
 
 /**
-  * 1. Calculating the minimum width based on the screen takover breakpoint
-  * 2. Only small flyouts should NOT takover the entire screen
+ * 1. Calculating the minimum width based on the screen takover breakpoint
  */
 $flyoutSizes: (
   "small": (
@@ -67,16 +66,22 @@ $flyoutSizes: (
   }
 }
 
+/**
+ * 1. Only small flyouts should NOT takover the entire screen
+ * 2. If a custom maxWidth is set, we need to override it.
+ */
 @include euiBreakpoint('xs','s') {
-  .euiFlyout:not(.euiFlyout--small) {  /* 2 */
+  .euiFlyout:not(.euiFlyout--small) {  /* 1 */
     left: 0;
     min-width: 0;
     width: auto;
     border-left: none;
+    max-width: 100vw !important; /* 2 */
   }
 
   .euiFlyout--small {
     width: 80vw; // ensure that it's only partially showing the main content
-    min-width: 0; /* 2 */
+    min-width: 0; /* 1 */
+    max-width: 80vw !important; /* 2 */
   }
 }