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

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 >
  <div >
    <div >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 >
    <div >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 >
    <div >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 >
    <div >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 >
    <div >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.

CodePudding user response：

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)