diff --git a/packages/pro/search/demo/Custom.vue b/packages/pro/search/demo/Custom.vue
index 1ecfa8135..ecedb06f9 100644
--- a/packages/pro/search/demo/Custom.vue
+++ b/packages/pro/search/demo/Custom.vue
@@ -5,7 +5,7 @@
     :searchFields="searchFields"
     :onChange="onChange"
     :onSearch="onSearch"
-    overlayContainer="demo-pro-search-custom"
+    overlayContainer=".demo-pro-search-custom"
   >
     <template #userForm="{ value, setValue, ok }">
       <IxSpace class="demo-pro-search-custom-user-form" vertical>
diff --git a/packages/pro/search/src/components/SearchItem.tsx b/packages/pro/search/src/components/SearchItem.tsx
index f40609f17..23697fcc4 100644
--- a/packages/pro/search/src/components/SearchItem.tsx
+++ b/packages/pro/search/src/components/SearchItem.tsx
@@ -5,22 +5,8 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import {
-  type Ref,
-  computed,
-  defineComponent,
-  inject,
-  normalizeClass,
-  onMounted,
-  onUnmounted,
-  provide,
-  ref,
-  watch,
-} from 'vue'
+import { computed, defineComponent, inject, normalizeClass, provide, ref, watch } from 'vue'
 
-import { useResizeObserver } from '@idux/cdk/resize'
-import { getScroll } from '@idux/cdk/scroll'
-import { useEventListener } from '@idux/cdk/utils'
 import { IxTooltip } from '@idux/components/tooltip'
 
 import Segment from './segment/Segment'
@@ -29,7 +15,6 @@ import { useSegmentStates } from '../composables/useSegmentStates'
 import { proSearchContext, searchItemContext } from '../token'
 import { searchItemProps } from '../types'
 import { renderIcon } from '../utils/RenderIcon'
-import { getBoxSizingData } from '../utils/getBoxsizingData'
 
 export default defineComponent({
   props: searchItemProps,
@@ -85,31 +70,6 @@ export default defineComponent({
       () => searchItemName.value + ' ' + segmentRenderDatas.value.map(data => data.input).join(' '),
     )
 
-    const { wrapperScroll, segmentScrolls } = useSegmentsScroll(segmentsRef, segmentRenderDatas)
-
-    // when we move cursor within input elements,
-    // current cursor position will be scrolled into view,
-    // so if ther start segment input and the segments wrapper is scrolled to start,
-    // there is no ellipsis
-    //
-    // however the wrapper may not be scrolled to start because inputs may have padding and border,
-    // and cursor wont be moved outside content
-    // so padding and border may always be ouside the wrapper view area
-    const leftSideEllipsis = computed(() => {
-      const startEl = segmentScrolls.value[0]?.el
-      const startElBoxSizingData = startEl && getBoxSizingData(startEl)
-      const offset = startElBoxSizingData ? startElBoxSizingData.paddingLeft + startElBoxSizingData.borderLeft : 0
-
-      return wrapperScroll.value.left > offset + 1 || (segmentScrolls.value[0]?.left ?? 0) > 1
-    })
-    const rightSideEllipsis = computed(() => {
-      const endEl = segmentScrolls.value[1]?.el
-      const endElBoxSizingData = endEl && getBoxSizingData(endEl)
-      const offset = endElBoxSizingData ? endElBoxSizingData.paddingRight + endElBoxSizingData.borderRight : 0
-
-      return wrapperScroll.value.right > offset + 1 || (segmentScrolls.value[1]?.right ?? 0) > 1
-    })
-
     const handleNameMouseDown = (evt: MouseEvent) => {
       evt.stopPropagation()
       evt.preventDefault()
@@ -141,27 +101,19 @@ export default defineComponent({
             <span class={`${prefixCls}-name`} onMousedown={handleNameMouseDown}>
               {searchItemName.value}
             </span>
-            <span v-show={leftSideEllipsis.value} class={`${prefixCls}-ellipsis-left`} key="__ellisps_left__">
-              ...
-            </span>
-            <span ref={segmentsRef} class={`${prefixCls}-segments`} key="__segments__">
-              {segmentRenderDatas.value.map(segment => (
-                <Segment
-                  key={segment.name}
-                  v-slots={slots}
-                  v-show={segment.segmentVisible}
-                  itemKey={props.searchItem!.key}
-                  input={segment.input}
-                  value={segment.value}
-                  selectionStart={segment.selectionStart}
-                  disabled={proSearchProps.disabled}
-                  segment={segment}
-                />
-              ))}
-            </span>
-            <span v-show={rightSideEllipsis.value} class={`${prefixCls}-ellipsis-right`} key="__ellisps_right__">
-              ...
-            </span>
+            {segmentRenderDatas.value.map(segment => (
+              <Segment
+                key={segment.name}
+                v-slots={slots}
+                v-show={segment.segmentVisible}
+                itemKey={props.searchItem!.key}
+                input={segment.input}
+                value={segment.value}
+                selectionStart={segment.selectionStart}
+                disabled={proSearchProps.disabled}
+                segment={segment}
+              />
+            ))}
             {!proSearchProps.disabled && (
               <span
                 class={`${prefixCls}-close-icon`}
@@ -177,88 +129,3 @@ export default defineComponent({
     }
   },
 })
-
-interface SegmentScroll {
-  el: HTMLElement | undefined
-  left: number
-  right: number
-}
-function useSegmentsScroll(
-  wrapperRef: Ref<HTMLElement | undefined>,
-  resetTrigger: Ref<unknown>,
-): {
-  wrapperScroll: Ref<SegmentScroll>
-  segmentScrolls: Ref<SegmentScroll[]>
-} {
-  const wrapperScroll = ref<SegmentScroll>({ left: 0, right: 0, el: wrapperRef.value })
-  const segmentScrolls = ref<SegmentScroll[]>([])
-
-  const getScrolls = (el: HTMLElement) => {
-    const { scrollLeft } = getScroll(el)
-    return {
-      el,
-      left: scrollLeft,
-      right: Math.max(el.scrollWidth - scrollLeft - el.offsetWidth, 0),
-    }
-  }
-
-  let clearListeners: (() => void) | null = null
-  let calcSize: (() => void) | null = null
-  const initScrollListeners = () => {
-    if (!wrapperRef.value) {
-      return
-    }
-
-    clearListeners?.()
-    segmentScrolls.value = []
-
-    const calcWrapperScroll = () => {
-      wrapperScroll.value = getScrolls(wrapperRef.value!)
-    }
-    const sizeCalculations = [calcWrapperScroll]
-
-    const listenerStopHandlers = [useEventListener(wrapperRef.value, 'scroll', calcWrapperScroll)]
-
-    const inputs = wrapperRef.value.querySelectorAll('input')
-    if (!inputs.length) {
-      return
-    }
-
-    // listen to the start and end input elements' scroll event
-    // and add its scroll calculation to the overall scroll calculation
-    ;[inputs.item(0), inputs.item(inputs.length - 1)].forEach((inputEl, index) => {
-      const scrollCalculation = () => {
-        segmentScrolls.value[index] = getScrolls(inputEl)
-      }
-      sizeCalculations.push(scrollCalculation)
-      listenerStopHandlers.push(useEventListener(inputEl, 'scroll', scrollCalculation))
-    })
-
-    clearListeners = () => listenerStopHandlers.forEach(stop => stop())
-    calcSize = () => sizeCalculations.forEach(calc => calc())
-
-    calcSize()
-  }
-
-  let resizeStop: (() => void) | null = null
-  onMounted(() => {
-    // when reset is triggered by comsumer, we re-init the scroll calculations
-    watch(resetTrigger, initScrollListeners, { immediate: true })
-
-    // when wrapper is resized, calculate scrolls
-    resizeStop = useResizeObserver(wrapperRef, () => {
-      calcSize?.()
-    })
-  })
-  onUnmounted(() => {
-    clearListeners?.()
-    resizeStop?.()
-    clearListeners = null
-    calcSize = null
-  })
-
-  return {
-    wrapperScroll,
-    segmentScrolls,
-  }
-}
diff --git a/packages/pro/search/src/components/segment/Segment.tsx b/packages/pro/search/src/components/segment/Segment.tsx
index 2ceb2c6fa..f32ee14ca 100644
--- a/packages/pro/search/src/components/segment/Segment.tsx
+++ b/packages/pro/search/src/components/segment/Segment.tsx
@@ -175,6 +175,7 @@ export default defineComponent({
         class={inputClasses.value}
         value={props.input ?? ''}
         disabled={props.disabled}
+        ellipsis={true}
         placeholder={props.segment.placeholder}
         onInput={handleInput}
         onFocus={handleFocus}
diff --git a/packages/pro/search/src/components/segment/SegmentInput.tsx b/packages/pro/search/src/components/segment/SegmentInput.tsx
index 64e130c4d..e42abb5dc 100644
--- a/packages/pro/search/src/components/segment/SegmentInput.tsx
+++ b/packages/pro/search/src/components/segment/SegmentInput.tsx
@@ -5,9 +5,22 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type CSSProperties, computed, defineComponent, inject, normalizeClass, onMounted, ref, watch } from 'vue'
-
-import { callEmit, convertCssPixel, useState } from '@idux/cdk/utils'
+import {
+  type CSSProperties,
+  type Ref,
+  computed,
+  defineComponent,
+  inject,
+  normalizeClass,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+} from 'vue'
+
+import { useResizeObserver } from '@idux/cdk/resize'
+import { getScroll, setScroll } from '@idux/cdk/scroll'
+import { callEmit, convertCssPixel, useEventListener, useState } from '@idux/cdk/utils'
 
 import { proSearchContext } from '../../token'
 import { type SegmentInputProps, segmentIputProps } from '../../types'
@@ -19,6 +32,7 @@ export default defineComponent({
   setup(props: SegmentInputProps, { attrs, expose }) {
     const { mergedPrefixCls } = inject(proSearchContext)!
 
+    const segmentWrapperRef = ref<HTMLElement>()
     const segmentInputRef = ref<HTMLInputElement>()
 
     const [inputWidth, setInputWidth] = useState(0)
@@ -60,13 +74,24 @@ export default defineComponent({
     })
 
     const { handleInput, handleCompositionStart, handleCompositionEnd } = useInputEvents(props)
+    const segmentScroll = useSegmentScroll(props, segmentInputRef)
+
+    const leftSideEllipsis = computed(() => segmentScroll.value.left > 1)
+    const rightSideEllipsis = computed(() => segmentScroll.value.right > 1)
 
     return () => {
       const prefixCls = `${mergedPrefixCls.value}-segment-input`
       const { class: className, style, ...rest } = attrs
 
       return (
-        <span class={normalizeClass([classes.value, className])}>
+        <span ref={segmentWrapperRef} class={normalizeClass([classes.value, className])}>
+          <span
+            v-show={props.ellipsis && leftSideEllipsis.value}
+            class={`${prefixCls}-ellipsis-left`}
+            key="__ellisps_left__"
+          >
+            ...
+          </span>
           <input
             ref={segmentInputRef}
             class={`${prefixCls}-inner`}
@@ -79,6 +104,13 @@ export default defineComponent({
             onCompositionend={handleCompositionEnd}
             {...rest}
           ></input>
+          <span
+            v-show={props.ellipsis && rightSideEllipsis.value}
+            class={`${prefixCls}-ellipsis-right`}
+            key="__ellisps_right__"
+          >
+            ...
+          </span>
           <MeasureElement onWidthChange={setInputWidth}>{props.value || props.placeholder || ''}</MeasureElement>
         </span>
       )
@@ -116,3 +148,61 @@ function useInputEvents(props: SegmentInputProps): InputEventHandlers {
     handleCompositionEnd,
   }
 }
+
+interface SegmentScroll {
+  left: number
+  right: number
+}
+
+function useSegmentScroll(props: SegmentInputProps, inputRef: Ref<HTMLInputElement | undefined>) {
+  const [segmentScroll, setSegmentScroll] = useState<SegmentScroll>({ left: 0, right: 0 }, true)
+  let inputWidth = 0
+  let oldSegmentScroll: SegmentScroll = { left: 0, right: 0 }
+
+  let stopScrollListen: (() => void) | undefined
+  let stopResizeListen: (() => void) | undefined
+
+  const getScrolls = (): SegmentScroll => {
+    const el = inputRef.value
+    if (!el) {
+      return { left: 0, right: 0 }
+    }
+
+    const { scrollLeft } = getScroll(el)
+    return {
+      left: scrollLeft,
+      right: Math.max(el.scrollWidth - scrollLeft - el.offsetWidth, 0),
+    }
+  }
+
+  const updateScroll = () => {
+    oldSegmentScroll = segmentScroll.value
+    setSegmentScroll(getScrolls())
+  }
+
+  onMounted(() => {
+    inputWidth = inputRef.value?.offsetWidth ?? 0
+
+    if (props.ellipsis) {
+      stopScrollListen = useEventListener(inputRef, 'scroll', updateScroll)
+      stopResizeListen = useResizeObserver(inputRef, () => {
+        const width = inputRef.value?.offsetWidth ?? 0
+        const widthOffset = inputWidth - width
+        inputWidth = width
+
+        if (widthOffset > 0 && segmentScroll.value.left > 0 && oldSegmentScroll.left <= 0) {
+          setScroll({ scrollLeft: segmentScroll.value.left + widthOffset }, inputRef.value)
+        } else {
+          updateScroll()
+        }
+      })
+    }
+  })
+
+  onUnmounted(() => {
+    stopScrollListen?.()
+    stopResizeListen?.()
+  })
+
+  return segmentScroll
+}
diff --git a/packages/pro/search/src/components/segment/TempSegment.tsx b/packages/pro/search/src/components/segment/TempSegment.tsx
index dac6db205..21bce5021 100644
--- a/packages/pro/search/src/components/segment/TempSegment.tsx
+++ b/packages/pro/search/src/components/segment/TempSegment.tsx
@@ -129,6 +129,7 @@ export default defineComponent({
         class={`${mergedPrefixCls.value}-temp-segment-input`}
         style={nameInputStyle.value}
         value={input.value}
+        ellipsis={false}
         onMousedown={handleMouseDown}
         onInput={handleInput}
         onKeydown={handleKeyDown}
diff --git a/packages/pro/search/src/types/segment.ts b/packages/pro/search/src/types/segment.ts
index fecdfe078..4a2986423 100644
--- a/packages/pro/search/src/types/segment.ts
+++ b/packages/pro/search/src/types/segment.ts
@@ -62,6 +62,7 @@ export type SegmentProps = ExtractInnerPropTypes<typeof segmentProps>
 export const segmentIputProps = {
   value: String,
   disabled: Boolean,
+  ellipsis: Boolean,
   placeholder: String,
   onInput: [Function, Array] as PropType<MaybeArray<(input: string) => void>>,
   onWidthChange: [Function, Array] as PropType<MaybeArray<(width: number) => void>>,
diff --git a/packages/pro/search/src/utils/getBoxsizingData.ts b/packages/pro/search/src/utils/getBoxsizingData.ts
deleted file mode 100644
index 0a3102aa3..000000000
--- a/packages/pro/search/src/utils/getBoxsizingData.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * @license
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
- */
-
-export interface BoxSizingData {
-  boxSizing: string
-  paddingTop: number
-  paddingBottom: number
-  paddingLeft: number
-  paddingRight: number
-  borderTop: number
-  borderBottom: number
-  borderLeft: number
-  borderRight: number
-}
-
-export function getBoxSizingData(node: HTMLElement): BoxSizingData {
-  const {
-    boxSizing,
-    paddingBottom,
-    paddingTop,
-    paddingLeft,
-    paddingRight,
-    borderBottom,
-    borderTop,
-    borderLeft,
-    borderRight,
-  } = window.getComputedStyle(node)
-
-  return {
-    boxSizing,
-    paddingTop: parseFloat(paddingTop),
-    paddingBottom: parseFloat(paddingBottom),
-    paddingLeft: parseFloat(paddingLeft),
-    paddingRight: parseFloat(paddingRight),
-    borderTop: parseFloat(borderTop),
-    borderBottom: parseFloat(borderBottom),
-    borderLeft: parseFloat(borderLeft),
-    borderRight: parseFloat(borderRight),
-  }
-}
diff --git a/packages/pro/search/style/index.less b/packages/pro/search/style/index.less
index 4d19f89aa..fc4247889 100644
--- a/packages/pro/search/style/index.less
+++ b/packages/pro/search/style/index.less
@@ -130,7 +130,7 @@
 
   &-search-item {
     display: inline-flex;
-    max-width: 250px;
+    max-width: 350px;
     align-items: center;
     height: @pro-search-item-height;
     padding: @pro-search-item-tag-padding;
@@ -147,13 +147,6 @@
       cursor: pointer;
       box-sizing: content-box;
     }
-    &-segments {
-      position: relative;
-      overflow: hidden;
-      display: inline-flex;
-      align-items: center;
-      color: @color-graphite-d40;
-    }
 
     &-close-icon {
       display: flex;
@@ -180,30 +173,33 @@
       }
     }
 
-    .@{pro-search-prefix}-segment-input-inner {
+    .@{pro-search-prefix}-segment-input {
       padding-right: @pro-search-segment-margin;
       padding-left: @pro-search-segment-margin;
+      max-width: @pro-search-segment-max-width;
+
       .@{pro-search-prefix}:not(.@{pro-search-prefix}-disabled) &:hover {
         color: @color-primary;
       }
     }
   }
-  &:not(&-focused) {
-    .@{pro-search-prefix}-search-item-tag {
-      max-width: @pro-search-item-tag-max-width;
-    }
-  }
 
   &-segment-input {
+    display: flex;
     height: 100%;
-    max-width: 100%;
+    color: @color-graphite-d40;
+
+    &-ellipsis-left, &-ellipsis-right {
+      flex-shrink: 0;
+    }
 
     &-inner {
+      flex: auto;
       height: 100%;
-      max-width: 100%;
       min-width: 1px;
       outline: none;
       box-sizing: content-box;
+      color: inherit;
       .placeholder(@pro-search-placeholder-color);
     }
     &-disabled &-inner {
@@ -222,6 +218,7 @@
   }
   &-temp-segment-input {
     margin-left: 8px;
+    height: @pro-search-item-height;
   }
   &-name-segment-overlay {
     .overlay()
diff --git a/packages/pro/search/style/themes/default.variable.less b/packages/pro/search/style/themes/default.variable.less
index a9962549e..811a4efbc 100644
--- a/packages/pro/search/style/themes/default.variable.less
+++ b/packages/pro/search/style/themes/default.variable.less
@@ -39,7 +39,6 @@
 @pro-search-item-height: 22px;
 @pro-search-item-color: @pro-search-color;
 
-@pro-search-item-tag-max-width: 160px;
 @pro-search-item-tag-color: @pro-search-color;
 @pro-search-item-tag-background-color: @color-graphite-l40;
 @pro-search-item-tag-border-radius: 2px;
@@ -55,6 +54,7 @@
 @pro-search-segment-padding-horizontal: @spacing-xs;
 @pro-search-segment-margin: @spacing-xs;
 @pro-search-segment-border-bottom: 1px solid @color-primary;
+@pro-search-segment-max-width: 150px;
 
 @pro-search-overlay-padding: 0;
 @pro-search-overlay-background-color: @background-color-component;
@@ -75,22 +75,3 @@
 @pro-search-select-panel-min-width: 100px;
 @pro-search-tree-select-panel-min-width: 200px;
 @pro-search-tree-select-panel-max-width: 400px;
-
-@pro-search-name-segment-input-min-width: 60px;
-@pro-search-name-segment-input-text-align: start;
-@pro-search-operator-segment-input-min-width: 20px;
-@pro-search-operator-segment-input-text-align: center;
-@pro-search-input-segment-input-min-width: 100px;
-@pro-search-input-segment-input-text-align: start;
-@pro-search-select-segment-input-min-width: 100px;
-@pro-search-select-segment-input-text-align: start;
-@pro-search-tree-select-segment-input-min-width: 200px;
-@pro-search-tree-select-segment-input-text-align: start;
-@pro-search-cascader-segment-input-min-width: 200px;
-@pro-search-cascader-segment-input-text-align: start;
-@pro-search-date-picker-segment-input-min-width: 100px;
-@pro-search-date-picker-segment-input-text-align: start;
-@pro-search-date-range-picker-segment-input-min-width: 100px;
-@pro-search-date-range-picker-segment-input-text-align: start;
-@pro-search-custom-segment-input-min-width: 100px;
-@pro-search-custom-segment-input-text-align: start;