JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div id="container">
        <span>
            <ul id="list">
              <li>
                element
                <div class="inner-container-absolute"></div>
                <div class="inner-container-fixed"></div>                  
              </li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
                            <li>el</li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
                            <li>el</li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
                            <li>el</li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
                            <li>el</li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
                            <li>el</li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
              <li>el</li>
            </ul>
        </span>
    </div>
</div>

CSS

div#container
{
overflow: auto; /* same behavior as: hiddden */
/*     overflow-x: visible;
    overflow-y: hidden;  */
    margin-left: 20px;
    margin-right: 20px;
    height: 100%;
}
div
{
    position:relative;
}
span
{
    overflow:visible;
    display:block;
}
ul
{
    display:inline-block;
    white-space: nowrap;
    overflow-x: visible;
    overflow-y: visible;
}
li
{
    display: block;
}

li .inner-container-absolute {
    position: absolute;
    background: yellow;
    content: '';
    width: 55px;
    left: -35px;
    height: 30px;
 }
 
 li .inner-container-fixed {
    position: fixed;
    background: yellow;
    content: '';
    width: 55px;
    left: -15px;
    height: 30px;
 }

span
{
    border: 1px solid blue;
    border-radius: 4px;
}

li {
  background: blue;
}

 li:before, li:after {
 position: absolute;
background: red;
content: '';
width: 55px;
left: -48px;
height: 30px;
}