When .table__header--inner sets justify-content: center;, its position is weird. It doesn't seem to know which div to use as the parent container to horizontally center.
What happened? This should be related to position: sticky;, but I don't know why, can you tell me?
And how to fix it?
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style> .table { width: 1000px; } .table__container { position: relative; height: 600px; overflow: auto; } .table__header { position: sticky; top: 0; background-color: red; z-index: 1; display: flex; justify-content: start; } .table__header--inner { height: 100%; background-color: inherit; flex-shrink: 0; font-weight: bold; display: flex; justify-content: center; align-items: center; } .table__body--row { display: flex; } .table__header--cell, .table__body--cell { background-color: inherit; flex-shrink: 0; flex-basis: 400px; border: solid 1px black; padding: 8px; height: 40px; display: flex; align-items: center; justify-content: center; box-sizing: content-box; }</style><body><div class="table"><div class="table__container"><div class="table__header"><div class="table__header--inner"><div class="table__header--cell">Column 1</div><div class="table__header--cell">Column 2</div><div class="table__header--cell">Column 3</div><div class="table__header--cell">Column 4</div><div class="table__header--cell">Column 5</div><div class="table__header--cell">Column 6</div><div class="table__header--cell">Column 7</div><div class="table__header--cell">Column 8</div><div class="table__header--cell">Column 9</div><div class="table__header--cell">Column 10</div></div></div><div class="table__body"><div class="table__body--row"><div class="table__body--cell">Row 1 Column 1</div><div class="table__body--cell">Row 1 Column 2</div><div class="table__body--cell">Row 1 Column 3</div><div class="table__body--cell">Row 1 Column 4</div><div class="table__body--cell">Row 1 Column 5</div><div class="table__body--cell">Row 1 Column 6</div><div class="table__body--cell">Row 1 Column 7</div><div class="table__body--cell">Row 1 Column 8</div><div class="table__body--cell">Row 1 Column 9</div><div class="table__body--cell">Row 1 Column 10</div></div></div></div></div></body></html>