Sticky header in flexbox table is not sticky

Question

I have created a flexbox based table, which is stripped to the basics the example below.

<!-- display: flex;flex-flow: column nowrap; flex:1 1 auto; --> 
<div class="ovdTable"> 
  <!-- display: flex; flex-flow: row nowrap; flex: 1 1 auto; -->
  <div class="ovdTable__table">  
    <!-- flex:1 1 auto; -->
    <div class="ovdTable__column">   
      <!-- display:flex; flex:none; -->                    
      <div class="ovdTable__cell ovdTable__cell--header"> 
      <!-- 1-n -->
      <div class="ovdTable__cell">                 
    </div>
  </div>
</div>

CSS class ovt_Table__cell--header adds the following style properties to the first cell in a column.

position: sticky;
position: -webkit-sticky;
top:0;

As expected i have search for similar stackoverflow articles and tried the solutions found there.

My position: sticky element isn't sticky when using flexbox
- Checked for parent element with overflow-x: hidden;
- Added align-self: flex-start to the sticky element.
Fixed element inside flexbox item
- Was not able to find any useful information here.

I have a CodePen example here.

Maybe I am totally wrong, but could i have made an error in the overflow settings?

Please keep solutions to the answer section. I'm not sure why you deleted the answer you wrote and included it in the question, but questions should not contain solutions. I would recommend undeleting your answer and marking it as the accepted answer. — TylerH, Apr 01 '21 at 18:44

score 1 · Answer 1 · answered Sep 07 '20 at 09:26

I was able to resolve it by adding an extra div inside the div with class "ovdTable" containing the header cells and making this div 'sticky' with an elevated z-index.

<!-- display: flex;flex-flow: column nowrap; flex:1 1 auto; --> 
<div class="ovdTable"> 
    <!-- display: flex; flex-flow: row nowrap; flex: 1 1 auto; -->
    <!-- position: sticky; top:0px; z-index:2; --> 
    <div class="ovdTable__tableHeader"> 
      <!-- 1-n -->
      <div class="ovdTable__tableHeader--column">Column 1</div>
    </div>
    <!-- display: flex; flex-flow: row nowrap; flex: 1 1 auto; -->
    <div class="ovdTable__tableContent">  
        <!-- flex:1 1 auto; -->
        <div class="ovdTable__column">   
            <!-- 1-n -->
            <div class="ovdTable__cell">                 
        </div>
    </div>
</div>

I have updated the codepen to match the solution.

Sticky header in flexbox table is not sticky

1 Answers1