Table build with flex with sticky row and columns: style bnot applied and sticky clumns disapears

Question

I am trying to build a table using flexbox. The code structure is:

.container {
  display: flex;
  flex-direction: column;
  overflow: auto;
  width: 200px;
  height: 200px;
}

.sticky-row,
.row {
  display: flex;
  flex-direction: row;
}

.sticky-row {
  position: sticky;
  background-color: aqua;
  top: 0;
}

.sticky-cell {
  position: sticky;
  background-color: aqua;
  left: 0;
}

<div class="container">
  <div class="sticky-row">
    <div class="sticky-cell">sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
  </div>
  <div class="row">
    <div class="sticky-cell">sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
  </div>
  <div class="row">
    <div class="sticky-cell">sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
  </div>
  <div class="row">
    <div class="sticky-cell">sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
  </div>
  <div class="row">
    <div class="sticky-cell">sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
  </div>
</div>

(CodeSandBox)

My issues are:

• the style is not applied to cells not visible before the horizontal scroll
• the sticky column disappears when I scroll too far

I could probably make it work with <table> but it would be much easier to integrate in my code with flexbox.

Answer 1

After some test you can put width: fit-content;

.container {
  display: flex;
  flex-direction: column;
  overflow: auto;
  width: 500px;
  height: 200px;
}

.sticky-row,
.row {
  display: flex;
  flex-direction: row;
  width: fit-content; <-- here
}

.sticky-row {
  position: sticky; 
  background-color: aqua;
  top: 0;
}

.sticky-cell {
  position: sticky;
  background-color: red;
  left: 0;
}

.sticky-row.sticky-cell {
  z-index: 1;
}

(code block)