diff --git a/package.json b/package.json
index 43abf96..4659e2c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-selectpage",
   "description": "SelectPage for Vue, a select items components provides the list of items with pagination",
-  "version": "3.0.11",
+  "version": "3.0.12",
   "author": "TerryZ <terry5@foxmail.com>",
   "type": "module",
   "files": [
diff --git a/src/core/data.js b/src/core/data.js
index b90542e..5fc25f5 100644
--- a/src/core/data.js
+++ b/src/core/data.js
@@ -115,7 +115,7 @@ export function useData (props, emit) {
     if (props.max === UNLIMITED) {
       return selectItem(row)
     }
-    if (selected.value.length === props.max) {
+    if (selected.value?.length === props.max) {
       message.value = lang.maxSelected.replace(LANG_MAX_SELECTED_LIMIT, props.max)
 
       messageDebounce(() => { message.value = '' })
diff --git a/src/styles/common.sass b/src/styles/common.sass
index cc96e29..e60f8d6 100644
--- a/src/styles/common.sass
+++ b/src/styles/common.sass
@@ -4,6 +4,7 @@
   font-weight: bold
   color: #999
 .sp-container
+  width: 100%
   min-width: 300px
   display: inline-flex
   overflow: hidden
diff --git a/src/styles/trigger.sass b/src/styles/trigger.sass
index 9d38ac7..5eb4022 100644
--- a/src/styles/trigger.sass
+++ b/src/styles/trigger.sass
@@ -4,7 +4,7 @@
   min-height: 31px
   justify-content: space-between
   flex-grow: 1
-  padding: 0 5px 0 3px
+  padding: 2px 5px 2px 2px
   background-color: white
   border: 1px solid #ddd
   border-radius: .3rem
@@ -56,7 +56,7 @@
       justify-content: space-between
       flex-grow: 1
       .sp-select-content
-        padding: 5px
+        padding: 3px 6px
         line-height: 1.143
         color: #333
     &.sp-chips