JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

<div class="wrapper">
  <div class="flex">
    <div>
      <span>1</span></div>
    <div>2</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>

CSS

.wrapper {
  display: flex;
  width: 100%;
  outline: 1px solid tomato;

  overflow: scroll;
 
}

.flex {
  display: flex;
  flex-direction: row;
  outline: 1px solid green;
  height: 90vh;


  div {
    width: 100vw;
    flex-shrink: 0;
    background: linear-gradient(to right, red, blue);
    height: 50%;

    &:first-child span{
      position: sticky;
      left: 0;
    }
  }
}