CSS粘性定位失效：水平滚动后表头和首列固定失效的原因及解决方法是什么？

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sticky sidebar example</title>
<style>
.table-container {
    display: block;
    max-width: 300px;
    max-height: 400px; /* 可调整 */
    overflow: auto;
}

.header-row {
    display: flex;
    position: sticky;
    top: 0;
    background-color: #f8f8f8;
    z-index: 1;
}

.header-cell, .cell {
    min-width: 80px;
    padding: 8px;
    border: 1px solid #ddd;
}

.header-cell {
    font-weight: bold;
}

.cell-fixed {
    position: sticky;
    left: 0;
    background-color: #f8f8f8;
    z-index: 1;
}

.table-body {
    display: block;
}

.row {
    display: flex;
}
</style>
<div class="table-container">
    <div class="header-row">
        <div class="header-cell header-fixed">header 1</div>
        <div class="header-cell">header 2</div>
        <div class="header-cell">header 3</div>
        <div class="header-cell">header 4</div>
        <div class="header-cell">header 5</div>
        <div class="header-cell">header 6</div>
        <div class="header-cell">header 7</div>
    </div>
    <div class="table-body">
        <div class="row">
            <div class="cell cell-fixed">row 1</div>
            <div class="cell">data 2</div>
            <div class="cell">data 3</div>
            <div class="cell">data 4</div>
            <div class="cell">data 5</div>
            <div class="cell">data 6</div>
            <div class="cell">data 7</div>
        </div>
    </div>
</div>

.table-body {
    display: flex;
}