how to show an overflow element completely . 'overflow-x : visible ' not working

i have a template with 3 section that .rightand.left sections are sticky to top and have 100vh height. and may become overflowed , that should be scrolled separately ( overflow-y:auto ).
my problem begins where i have elements ( .right span:after ) with position:absolute and left:-100% for example, that cause an horizontal overflow. and i want that element to be visible. but overflow-x: visible does not work properly.

how to scroll .right section whiles the hovered text is showing

---

Given the questions that have somewhat like my problem, including these questions :

• CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
• overflow-y:visible not working when overflow-x:hidden is present
• Overflow y hidden breaks overflow x visible
  and ...

i know the cause of my problem but i don't found acceptable answer. i tried to write some codes to show my problem. and thank you for guiding me.

I prefer to be answered with css but js is acceptable too.

update :

i try to do that with js but when overflow property doesn't be set for right the scrollTop not working.

*,*:after,*:before{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
main{
  background: lightgray;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-width: 500px;
  max-width: 80vw;
  margin: 0 auto;
}
section{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5rem;
  gap: 2rem;
}
.left{
  grid-column: 1 / 4;
  background: gold;
}
.right{
  grid-column: 10 / 13;
  background: lightblue;
}
.middle{
  grid-column: 4 / 10;
  grid-row-start: 1;
}
.middle span{
  padding: 5rem 0;
  width: 100%;
  text-align: center;
}
span{
  padding: 5px 0;
  border: 1px dashed;
  position: relative;
}

.left, .right{
  height: 100vh;
  position: sticky; /* i want to be sticky*/
  top: 0;
  overflow-y: auto;
}


.right{
  overflow-x: visible; /* this not work */
}

.right span:after{       /* i want it to be visible complately*/
  content:"hovered";
  position: absolute;
  height: 20px;
  background: red;
  left: -100%;
}

<main>
  <section class="left">
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
  </section>
  <section class="right">
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
  </section>
  <section class="middle">
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
  </section>
</main>

from how to show an overflow element completely . 'overflow-x : visible ' not working