Overflow-auto not showing all content

I have a tablist and I have it to overflow auto however it does not scroll to show all the 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>

<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;
}

.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;
}

2 Replies

Kevin Powell•2y ago

Take off justify-content: center from the .tablist. The browser add the scrollbar because content is overflowing out the right side, it doesn't look for things overflowing out the left. Try placing an element on a page and adding a margin-left: 100rem, it adds a scrollbar so you can get to that content. Add a margin-left: -100rem and it vanishes. With the overflow there, the browser is only looking for what's overflowing out the right side, even though content has overflowed in both directions because of the justify-content: center. As far as I know, there's no way to have both of them.

Patrick_WitterOP•2y ago

thnx @Kevin

Gaming

Programming

Overflow-auto not showing all content