scroll to a overflowing item inside flex box

Question

My desired goal is that when I keyboard to the right outside of the flexbox, I want to push the other items to the left so I can see the terms in the overflow, like a scroll. I can currently keyboard to any item, but I want to make the CSS to where it pushes the first items to overflow left or something of that nature. Here is a screenshot. If I need to translate the tailwind to normal css let me know. thanks!

<section class="ml-8 border-2">
    <slot />
    <div class="m-auto uppercase border-2">
        Popular Searches
    </div>
    <div class="popularSearchTerms">
        {#each popularSearches as item, index}
            <button
                class="popularBtn"
                class:popularSearchFocused={popularSearchesHasFocus &&
                    index === resultsPosition}
            >
                <div class="flex p-2">
                    <span class="w-4 h-4 mt-2">
                        <Search />
                    </span>
                    <span class="ml-2 mr-2">{item}</span>
                </div>
            </button>
        {/each}
    </div>
</section>

<style lang="postcss">

    .popularSearchTerms{
        @apply flex justify-between p-2 mt-6 
               overflow-hidden border-2
    .popularBtn {
        @apply bg-navBackground rounded-md mr-4;
    }
    .popularSearchFocused {
        @apply transition-transform duration-300 
               ease-in-out transform scale-110 z- 
               10 bg-gray-100  border-4 border- 
               Orange rounded-md shadow- 
               vodTileFocus text-navBackground 
                text-shadow-none;
    }
</style>