more of a css question but for some reason on chrome this wont show a scroll bar

.post-overlay-text {
  padding: 2rem;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.1);
  -webkit-overflow-scrolling: touch;
}

.post-overlay-text::-webkit-scrollbar {
  width: 12px;
  background-color: rgba(0, 0, 0, 0.05);
}

.post-overlay-text::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
}

.post-overlay-text::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, 0.05);
}

.post-overlay-text::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

I have an overlay modal and text that can overlfow it and needs to be scrollable but i cannot get the scroll bar onto it for some reason on chrome. Im not hiding my scrollbars anywehre in my app at all. Is there any good alterantice for this? is there a way to just instead make the modal scrollable instead of need to force a scroll bar scroll? (currently scrolling only scrolls the bg page)