diff --git a/packages/stack/example/App.js b/packages/stack/example/App.js
index 671817a0..c3e790da 100644
--- a/packages/stack/example/App.js
+++ b/packages/stack/example/App.js
@@ -25,6 +25,7 @@ import {
   HeaderBackgroundDefault,
   HeaderBackgroundFade,
 } from './src/HeaderBackgrounds';
+import DragLimitedToModal from './src/DragLimitedToModal';
 
 // Comment the following two lines to stop using react-native-screens
 // eslint-disable-next-line import/no-unresolved
@@ -88,6 +89,11 @@ const data = [
     title: 'Header background (fade transition)',
     routeName: 'HeaderBackgroundFade',
   },
+  {
+    component: DragLimitedToModal,
+    title: 'Drag limited to modal',
+    routeName: 'DragLimitedToModal',
+  },
 ];
 
 // Cache images
diff --git a/packages/stack/example/src/DragLimitedToModal.js b/packages/stack/example/src/DragLimitedToModal.js
new file mode 100644
index 00000000..ccbedac6
--- /dev/null
+++ b/packages/stack/example/src/DragLimitedToModal.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { View, Text, StyleSheet, Dimensions } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+const HEIGHT = Dimensions.get('screen').height;
+
+const { interpolate } = Animated;
+
+const DragLimitedToModal = () => (
+  <View style={styles.modal}>
+    <Text style={styles.text}>Adjusts to the size of text</Text>
+  </View>
+);
+
+DragLimitedToModal.navigationOptions = {
+  gestureDirection: 'vertical',
+  gestureResponseDistance: { vertical: HEIGHT },
+  cardTransparent: true,
+  cardStyleInterpolator: ({ current }) => {
+    const translateY = interpolate(current.progress, {
+      inputRange: [0, 1],
+      outputRange: [HEIGHT, 0],
+    });
+
+    return {
+      cardStyle: {
+        transform: [{ translateY }],
+        flex: undefined,
+      },
+      containerStyle: {
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+    };
+  },
+};
+
+const styles = StyleSheet.create({
+  modal: {
+    padding: 30,
+    borderRadius: 15,
+    backgroundColor: '#000',
+  },
+  text: {
+    fontSize: 18,
+    color: '#fff',
+  },
+});
+
+export default DragLimitedToModal;
diff --git a/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap b/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap
index 33b76b2b..a6501090 100644
--- a/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap
+++ b/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap
@@ -146,6 +146,7 @@ Array [
                       "flex": 1,
                       "overflow": "hidden",
                     },
+                    null,
                     Object {
                       "backgroundColor": "#eee",
                     },
@@ -297,6 +298,7 @@ Array [
                                     "flex": 1,
                                     "overflow": "hidden",
                                   },
+                                  null,
                                   Object {
                                     "backgroundColor": "#eee",
                                   },
diff --git a/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap b/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap
index 714d70e1..49ca118e 100644
--- a/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap
+++ b/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap
@@ -146,6 +146,7 @@ Array [
                       "flex": 1,
                       "overflow": "hidden",
                     },
+                    null,
                     Object {
                       "backgroundColor": "#eee",
                     },
@@ -464,6 +465,7 @@ Array [
                       "flex": 1,
                       "overflow": "hidden",
                     },
+                    null,
                     Object {
                       "backgroundColor": "#eee",
                     },
diff --git a/packages/stack/src/views/Stack/Card.tsx b/packages/stack/src/views/Stack/Card.tsx
index e300c4b0..c59408b7 100755
--- a/packages/stack/src/views/Stack/Card.tsx
+++ b/packages/stack/src/views/Stack/Card.tsx
@@ -638,6 +638,14 @@ export default class Card extends React.Component<Props> {
         : this.handleGestureEventHorizontal
       : undefined;
 
+    let overrideFlex = null;
+    if (cardStyle) {
+      const style = StyleSheet.flatten(cardStyle) as ViewStyle;
+      if (style.hasOwnProperty('flex')) {
+        overrideFlex = { flex: style.flex };
+      }
+    }
+
     return (
       <StackGestureContext.Provider value={this.gestureRef}>
         <View pointerEvents="box-none" {...rest}>
@@ -681,6 +689,7 @@ export default class Card extends React.Component<Props> {
                   progress={this.props.current}
                   style={[
                     styles.content,
+                    overrideFlex,
                     transparent ? styles.transparent : styles.opaque,
                     contentStyle,
                   ]}