diff --git a/components/cascader.tsx b/components/cascader.tsx
index eb804e4..9e0d8b1 100644
--- a/components/cascader.tsx
+++ b/components/cascader.tsx
@@ -124,7 +124,13 @@ const CascaderComponent: React.FC<CascaderProps> = ({
                     ]
                 ]}
             >
-                {renderLevel(items, level)}
+                <ScrollView
+                    style={{ flex: 1 }}
+                    showsVerticalScrollIndicator={true}
+                    contentContainerStyle={{ paddingBottom: 20 }}
+                >
+                    {renderLevel(items, level)}
+                </ScrollView>
             </View>
         ));
     };
@@ -143,6 +149,7 @@ const CascaderComponent: React.FC<CascaderProps> = ({
                 horizontal
                 showsHorizontalScrollIndicator={false}
                 contentContainerStyle={styles.scrollContent}
+                style={{ flex: 1 }}
             >
                 {renderColumns()}
             </ScrollView>
@@ -159,18 +166,22 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         backgroundColor: '#fff',
+        height: 300, // Set a fixed height for the container
     },
     scrollContent: {
         flexGrow: 1,
+        height: '100%',
     },
     column: {
         height: '100%',
+        maxHeight: '100%',
     },
     columnWithDivider: {
         borderRightWidth: 1,
     },
     levelContainer: {
         height: '100%',
+        maxHeight: '100%',
     },
     item: {
         flexDirection: 'row',
@@ -178,8 +189,8 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         paddingVertical: 12,
         paddingHorizontal: 16,
-        minWidth: '100%', // 确保最小宽度填满容器
-        overflow: 'hidden', // 隐藏超出部分
+        minWidth: '100%',
+        overflow: 'hidden',
     },
     text: {
         fontSize: 15,