带有标头的高级HTML CSS flexbox表

Question

我想创建带有粘性标题的显示弹性表。 我不知道为什么，但是当我将表结构的显示设置为flexbox时，我的表便失去了它的位置：粘性。

我的代码（scss）：

 .talbe-container{
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        overflow-y: auto;
          .table{
            width: 100%;
            display: flex;
            flex-flow: column nowrap;
            flex: 1 1 auto;
            thead{
              tr{
                display: flex;
                flex-flow: row nowrap;
                align-self: flex-start;
                th{
                  top: 0;
                  position: sticky;
                  display: flex;
                  flex-flow: row nowrap;
                  flex-grow: 1;
                  flex-basis: 0;
                  white-space: nowrap;
                  z-index: 100;
                }
              }
            }
            tbody{
              tr{
                display: flex;
                flex-flow: row nowrap;
                td{
                  display: flex;
                  flex-flow: row nowrap;
                  flex-grow: 1;
                  flex-basis: 0;
                  height: .20rem;
                  white-space: nowrap;
                  overflow: hidden;
                  font-size: .14rem;
                }
              }
            }
          }
}

html代码是容器div中的一个简单表。

关于使用flexbox时没有粘性标头的Gif：

感谢您的时间，帮助和事先答复：）

----＃Edit1 我的问题是关于为什么显示：flexbox和position：sticky不能一起工作，而不是关于如何在纯CSS中制作固定的标头表。