Overflow-auto not showing all content

<div role="tablist" aria-orientation="horizontal" class="tablist" tabindex="0" data-orientation="horizontal" style="outline: none;">

  <button type="button" role="tab" aria-selected="false" aria-controls="radix-:r6i:-content-Account" data-state="inactive" id="radix-:r6i:-trigger-Account" class="tab-button" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Account</button>
</div>

.tablist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-color: #a1a1a1; 
  padding: 0.25rem;
  color: #a1a1a1; 
  width: 100%;
  overflow-x: auto;
  height: 5rem;
}

.tab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s;
  color: #a1a1a1; 
  background-color: #a1a1a1;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); 
  flex-grow: 1;
  flex-shrink: 0;
}