flexbox 表中的粘性標題不粘性

Question

我創建了一個基於 flexbox 的表，它被剝離到下面的例子的基礎。

<!-- 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 類 ovt_Table__cell--header 將以下樣式屬性添加到列中的第一個單元格。

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

正如預期的那樣，我搜索了類似的 stackoverflow 文章並嘗試了在那里找到的解決方案。

• 我的立場：粘性元素在使用 flexbox 時不粘性
  • 檢查帶有overflow-x: hidden;父元素overflow-x: hidden;
  • 添加align-self: flex-start到粘性元素。
• flexbox 項目內的固定元素
  • 無法在這里找到任何有用的信息。

我這里有一個 CodePen 示例。

也許我完全錯了，但我可能在溢出設置中犯了錯誤嗎？

Answer 1

我能夠通過在包含標題單元格的類“ovdTable”的 div 中添加一個額外的 div 並使用提升的 z-index 使這個 div“粘性”來解決它。

<!-- 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>

我已經更新了 codepen 以匹配解決方案。