I use tailwindcss and vue. Now I create header and I have a problem.

<template>
  <header
    class="w-[100vw] max-w-[100vw] box-border bg-white whitespace-nowrap px-7 shadow-lg border-b border-b-gray-300 py-[2px] flex flex-row items-center select-none"
  >
    <div class="border-2 border-black p-[2px] flex flex-row cursor-pointer mr-3">
    // logo  
    </div>
    <div class="flex flex-row items-center gap-1">
     // some routes
    </div>
    <div class="flex-1 flex flex-row justify-between items-center gap-2">
      <TemalarSlider :dynamic-width="dynamicWidth" />
      <Search @searchToggled="handleSearchToggle" />
    </div>
    <div class="select-none flex flex-row gap-2 relative items-center justify-end py-1">
     // also some routes
    </div>
  </header>
</template>
<script setup>

const dynamicWidth = ref('100%')

function handleSearchToggle(isOpen) {
  dynamicWidth.value = isOpen ? 'calc(100% - 300px)' : '100%' // Adjust as needed
}
</script>

Here I want flex-1 must be max-width. here Search this animated search bar.

My TemalarSlider this:

<template>
  <div
    :style="{ maxWidth: dynamicWidth, width: dynamicWidth }"
    class="overflow-hidden bg-gray-400 transition-all duration-500"
  >
    <AnOutlinedArrowLeft />
    <div class="overflow-x-auto flex flex-row items-center pr-4">
      // more items
    </div>
    <AnOutlinedArrowRight />
  </div>
</template>

<script setup>
import useOthers from '@/stores/others'
import { AnOutlinedArrowLeft, AnOutlinedArrowRight } from '@kalimahapps/vue-icons'

const others = useOthers()
defineProps(['dynamicWidth'])
</script>
<style scoped></style>

When I dont add items work well. after i add item width TemalarSlider increased. How to do this? I try do this overflow-x-scroll. But dont be.