position: sticky scroll still moving element

Question

I have a requirement of displaying something similar to a table with a sticking first column that can scroll horizontally.

The column is being sticky for a while but when you scroll too much it starts moving with the rest:

.wrapper {
  width: 250px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.header-container, .row-data {
  display: flex;
  position: relative;
}

.header, .data {
  flex: 0 0 80px;
  padding: 1rem;
  background-color: lightblue;
}

.fullname {
  position: sticky;
  left: 0;
  background-color: orange;
}

<div class="container">
  <div class="wrapper">

    <div class="header-container">
      <div class="header fullname">Full Name</div>
      <div class="header">Test 1</div>
      <div class="header">Test 2</div>
      <div class="header">Test 3</div>
      <div class="header">Test 4</div>
    </div>
    
    <div class="data-container">
      <div class="row-data">
        <div class="data fullname">Full Name</div>
        <div class="data">Test 1</div>
        <div class="data">Test 2</div>
        <div class="data">Test 3</div>
        <div class="data">Test 4</div>
      </div>

      <div class="row-data">
        <div class="data fullname">Full Name</div>
        <div class="data">Test 1</div>
        <div class="data">Test 2</div>
        <div class="data">Test 3</div>
        <div class="data">Test 4</div>
      </div>
    </div>
  </div>
</div>

How do I get that first Full Name column to be stickied without using a <table> which brings it's own baggage of issues.

Answer 1

As described by August, I think position sticky isn't the best solution for your problem.

I made a similar approach using absolute positioning. placing your headlines before your rows using a pseudo element and data-attributes.

.wrapper {
  width: 250px;
  padding-left: 120px;
  position: relative;
  background-color: orange;
}

.inner {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.header-container,
.row-data {
  display: flex;
}

.header, .data {
  flex: 0 0 80px;
  padding: 1rem;
  background-color: lightblue;
}

.header-container::before,
.row-data::before{
  content: attr(data-title);
  left: 0px;
  padding: 1rem;
  position: absolute;
}

<div class="container">
  <div class="wrapper">
    <div class="inner">
      <div class="header-container" data-title="Fullname">
        <div class="header">Test 1</div>
        <div class="header">Test 2</div>
        <div class="header">Test 3</div>
        <div class="header">Test 4</div>
      </div>
    
      <div class="data-container">
        <div class="row-data" data-title="Fullname">
          <div class="data">Test 1</div>
          <div class="data">Test 2</div>
          <div class="data">Test 3</div>
          <div class="data">Test 4</div>
        </div>
        <div class="row-data" data-title="Fullname">
          <div class="data">Test 1</div>
          <div class="data">Test 2</div>
          <div class="data">Test 3</div>
          <div class="data">Test 4</div>
        </div>
      </div>
    </div>
  </div>
</div>