scroll to a overflowing item inside flex box - css

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>