diff --git a/src/config.json b/src/config.json
index f7e8a045d9..acf4bb9b36 100644
--- a/src/config.json
+++ b/src/config.json
@@ -235,7 +235,7 @@
           "author": "hx"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "SafeArea",
           "type": "component",
           "cName": "安全区",
diff --git a/src/packages/safearea/demos/taro/demo1.tsx b/src/packages/safearea/demos/taro/demo1.tsx
index f825a21dff..3302843844 100644
--- a/src/packages/safearea/demos/taro/demo1.tsx
+++ b/src/packages/safearea/demos/taro/demo1.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, Text } from '@tarojs/components'
+import { ScrollView, Text } from '@tarojs/components'
 import { SafeArea } from '@nutui/nutui-react-taro'
 
 function generateRandomTextArray(count: number) {
@@ -19,10 +19,10 @@ function generateRandomTextArray(count: number) {
 
 const Demo1 = () => {
   return (
-    <View>
+    <ScrollView>
       <Text>{generateRandomTextArray(900).join(' ')}</Text>
       <SafeArea position="bottom" />
-    </View>
+    </ScrollView>
   )
 }
 
diff --git a/src/packages/safearea/safearea.harmony.css b/src/packages/safearea/safearea.harmony.css
index 60511b3453..17c3f7fd80 100644
--- a/src/packages/safearea/safearea.harmony.css
+++ b/src/packages/safearea/safearea.harmony.css
@@ -1,5 +1,5 @@
 .nut-safe-area {
-  display: block;
+  display: flex;
   width: 100%;
 }
 .nut-safe-area-position-top {
diff --git a/src/packages/safearea/safearea.scss b/src/packages/safearea/safearea.scss
index bbed5d12fa..62b8722282 100644
--- a/src/packages/safearea/safearea.scss
+++ b/src/packages/safearea/safearea.scss
@@ -1,5 +1,5 @@
 .nut-safe-area {
-  display: block;
+  display: flex;
   width: 100%;
 
   &-position-top {