diff --git a/packages/editor/src/layouts/props-panel/PropsPanel.vue b/packages/editor/src/layouts/props-panel/PropsPanel.vue
index ba3ca8c2..ba9c2c4b 100644
--- a/packages/editor/src/layouts/props-panel/PropsPanel.vue
+++ b/packages/editor/src/layouts/props-panel/PropsPanel.vue
@@ -171,7 +171,7 @@ const propsPanelWidth = ref(
 );
 
 onMounted(() => {
-  propsPanelEl.value?.style.setProperty('--props-style-panel-width', `${propsPanelWidth.value}px`);
+  propsPanelEl.value?.style.setProperty('--props-style-panel-width', `${Math.max(propsPanelWidth.value, 0)}px`);
 });
 
 const widthChange = ({ deltaX }: OnDrag) => {
@@ -187,7 +187,7 @@ const widthChange = ({ deltaX }: OnDrag) => {
   if (value > uiService.get('columnWidth').right) {
     value = uiService.get('columnWidth').right - 40;
   }
-  propsPanelWidth.value = value;
+  propsPanelWidth.value = Math.max(value, 0);
 };
 
 watch(propsPanelWidth, (value) => {
diff --git a/packages/editor/src/layouts/props-panel/use-style-panel.ts b/packages/editor/src/layouts/props-panel/use-style-panel.ts
index a77e2003..057477b5 100644
--- a/packages/editor/src/layouts/props-panel/use-style-panel.ts
+++ b/packages/editor/src/layouts/props-panel/use-style-panel.ts
@@ -1,4 +1,4 @@
-import { computed, type Ref } from 'vue';
+import { computed, type Ref, watch } from 'vue';
 
 import { Protocol } from '@editor/services/storage';
 import { Services } from '@editor/type';
@@ -21,6 +21,15 @@ export const useStylePanel = (
 
   const showStylePanelToggleButton = computed(() => uiService.get('frameworkRect').width >= 1280);
 
+  watch(
+    () => uiService.get('frameworkRect').width,
+    () => {
+      if (uiService.get('columnWidth').right < propsPanelWidth.value) {
+        toggleStylePanel(false);
+      }
+    },
+  );
+
   const toggleStylePanel = (showStylePanel: boolean) => {
     uiService.set('showStylePanel', showStylePanel);
     storageService.setItem(showStylePanelStorageKey, showStylePanel, { protocol: Protocol.BOOLEAN });