Детские элементы липкого элемента не могут быть горизонтально центрированы обычно ⇐ CSS

[Anonymous]

Когда .table__header-inner устанавливает Levify-content: center; , его позиция странная. Кажется, не знает, какой дивинг использовать в качестве родительского контейнера в горизонтально в центре. < /P>
Что случилось? Это должно быть связано с позицией: липкий; < /code>, но я не знаю, почему, вы можете сказать мне? < /P>
и как это исправить?

Код: Выделить всё

  .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;
}< /code>






Document







Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Column 9
Column 10




Row 1 Column 1
Row 1 Column 2
Row 1 Column 3
Row 1 Column 4
Row 1 Column 5
Row 1 Column 6
Row 1 Column 7
Row 1 Column 8
Row 1 Column 9
Row 1 Column 10

обновление
Ожидаемый результат заключается в том, что Table__header-cell центрируется горизонтально в .table__header- Inner . Как изображение ниже:

теперь удалить .table__header--inner {useify-content: center; } , рендеринг хорош, потому что есть 10 Table__header-Colls просто заполнение .table__header-inner , поэтому он выглядит горизонтально центрированным.
Но что, если вы уменьшите количество .table__header-cell на 5? Как мне сосредоточить это по горизонтали?

Подробнее здесь: https://stackoverflow.com/questions/796 ... ed-normall