HTML - Sticky position partially working for table-CodePudding

I want to build a first column sticky with css position:sticky and left:0.

While I have a header and a table, with overflow-x: scroll set. However, when I start to scroll to right, the first column for the table body is partially working and starting to move once it passed the width of its parent. For the table header it doesn't have such problem.

Please may I have your to provide some insights here

Here is my codepen for reference. Thanks a lot!!

https://codepen.io/jackforfun/pen/yLPwYoz

CodePudding user response：

Add to your .row-container the two css properties below:

display: flex;
flex-wrap: wrap;

.cell {
  padding: 25px;
  flex: 0 0 100px;
  border: 1px solid grey;  
}

.cell-1 {
  padding: 25px;
  flex: 0 0 100px;
  border: 1px solid grey;
  background-color: red;  
  position: sticky;
  left: 0;
}

.header {
  display: flex;
  background-color: orange;
  width: 500px;
  overflow-x: scroll;
  
}

.row-container {
  display: flex;
  flex-wrap: wrap;  
  width: 500px;
  overflow-x: scroll;
}


.row {
  display: flex;
  background-color: green;
}

<div>
  <div >
    <div >First</div>
    <div >Header</div>
    <div >Header</div>
    <div >Header</div>
    <div >Header</div>
    <div >Header</div>
    <div >Header</div>    
  </div>
  
  <div >
    <div >
      <div >
        <div >Content</div>
        <div >Content</div>
        <div >Content</div>
        <div >Content</div>
        <div >Content</div>
        <div >Content</div>        
      </div>
      <div >
        <div >Content</div>
        <div >Content</div>
        <div >Content</div>
        <div >Content</div>
        <div >Content</div>
        <div >Content</div>        
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Lowrey answer is perfectly working for above question. Thank you for that. However, I got another similar problem when even adding the flex-wrap cannot be resolved.

There is a table with two rows, and the first column stick to the left. While it is scrolling horizontally, the first column was sticked initially. After a while, the first column cannot stick anymore and start to move.

The situation is a bit similar to the original question. Thank you for advance for checking this.

.cell {
  padding: 25px;
  height: 50px;
  flex: 0 0 100px;
  border: 1px solid grey;  
}

.cell-1 {
  padding: 25px;
  flex: 0 0 100px;
  border: 1px solid grey;
  background-color: red;  
  position: sticky;
  left: 0;
}


.row-container {
  overflow-x: scroll;
  flex-wrap:wrap;
  display:flex;
}

.row {
  display: flex;
  background-color: green;
}

.grid {  
  width: 350px;
}

<div >
  <div >
    <div >
      <div  style="flex: 1 0 150px; ">
        First Column
      </div>
      <div  style="flex: 1 0 100px; ">
        Column
      </div>
      <div  style="flex: 1 0 100px; ">
        Column
      </div>
      <div  style="flex: 1 0 100px; ">
        Column
      </div>
      <div  style="flex: 1 0 100px; ">
        Column
      </div>
      <div  style="flex: 1 0 100px; ">
        Column
      </div>
      <div  style="flex: 1 0 100px; ">
        Column
      </div>      
    </div>
    <div >
      <div  style="flex: 1 0 150px; ">
        First Column
      </div>
      <div  style="flex: 1 0 100px; ">
        Column
      </div>
      <div  style="flex: 1 0 100px; ">
        Column
      </div>
      <div  style="flex: 1 0 100px; ">
        Column
      </div>
      <div  style="flex: 1 0 100px; ">
        Column
      </div>
      <div  style="flex: 1 0 100px; ">
        Column
      </div>
      <div  style="flex: 1 0 100px; ">
        Column
      </div>      
  </div>
</div>

https://codepen.io/jackforfun/pen/abVMyMd