CSS свойство 'resize' не работает с 'sticky'

Question

Я создал замену таблицы на основе сетки.

Сетка предназначена для удержания верхних колонтитулов таблицы при прокрутке, для этого я использовал position: sticky;.

Хотя он работает безупречно, мне все равно, если я установлю resize: horizontal;, он просто не позволит мне - я могу иметь и то, и другое, но не оба.

Есть ли обходной путь? Извините, если я не публикую код HTML, он генерируется vue и он довольно нечитабелен, плюс мне придется публиковать vue содержимое компонента.

Вот мысль SASS:

.table {
  display: grid;
  overflow-y: scroll;
  grid-template-columns: repeat(var(--columnCount), minmax(min-content, 1fr));
  max-height: 100px;
}

.table-headers {
  display: contents;
  top: 0;
}

.table-headers > .table-header:last-of-type > .table-header-resizer {
  display: none;
}

.table-header {
  top: 0;
  display: flex;
  position: sticky;
  font-weight: 700;
  border-right: 1px solid #D5E3EA;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid #D5E3EA;
  background: #F7F7F7;
}

.table-header:last-of-type {
  border-right: none;
}

.table-header-cell {
  display: flex;
  flex-grow: 1;
  resize: horizontal;
  padding: 8px;
}

.table-row {
  display: contents;
}

.table-row > .table-cell {
  background: #f4f4f4;
  border-top: 1px solid #D5E3EA;
}

.table-row > .table-cell:nth-of-type(even) {
  background: #f2f2f2;
}

.table-cell {
  display: flex;
  flex-grow: 1;
  padding: 8px;
  border-right: 1px solid #D5E3EA;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.table-cell:last-of-type {
  border-right: none;
}

<div class="table" style='--columnCount: 3;'>
<div class="table-headers">
    <div class="table-header">
        <div class="table-cell">
            One
        </div>
    </div>
    <div class="table-header">
        <div class="table-cell">
            Two
        </div>
    </div>
    <div class="table-header">
        <div class="table-cell">
            Three
        </div>
    </div>
</div>
<div class="table-row">
    <div class="table-cell">
        One
    </div>
    <div class="table-cell">
        Two
    </div>
    <div class="table-cell">
        Three
    </div>
</div>
<div class="table-row">
    <div class="table-cell">
        One
    </div>
    <div class="table-cell">
        Two
    </div>
    <div class="table-cell">
        Three
    </div>
</div>
<div class="table-row">
    <div class="table-cell">
        One
    </div>
    <div class="table-cell">
        Two
    </div>
    <div class="table-cell">
        Three
    </div>
</div>
<div class="table-row">
    <div class="table-cell">
        One
    </div>
    <div class="table-cell">
        Two
    </div>
    <div class="table-cell">
        Three
    </div>
</div>
<div class="table-row">
    <div class="table-cell">
        One
    </div>
    <div class="table-cell">
        Two
    </div>
    <div class="table-cell">
        Three
    </div>
</div>
<div class="table-row">
    <div class="table-cell">
        One
    </div>
    <div class="table-cell">
        Two
    </div>
    <div class="table-cell">
        Three
    </div>
</div>
<div class="table-row">
    <div class="table-cell">
        One
    </div>
    <div class="table-cell">
        Two
    </div>
    <div class="table-cell">
        Three
    </div>
</div>
</div>

Answer 1

Если у вас возникла та же проблема, просто поместите вложенный дочерний элемент в липкий элемент и установите вместо него изменение размера.