Проблемы с гибкими таблицами данных Адама Линча с сеткой CSS

Question

Я использую гибкие таблицы данных Адама Линча с кодом сетки CSS. Это действительно аккуратный проект. https://adamlynch.com/flexible-data-tables-with-css-grid. У меня есть пара вопросов по проекту.

1. Я заметил, что когда я прокручиваю столбец с правой стороны столбца с горизонтальной полосой прокрутки, я больше не могу изменить размер любого столбца. Я некоторое время пытался выяснить, как это исправить, но безрезультатно.

2. Я заметил, что, если я изменю размер одного столбца, я могу изменить размер другого столбца сразу после этого без проблем. Однако, если я попытаюсь изменить размер одного и того же столбца дважды, я не смогу перетащить разделитель во второй раз. Эта проблема не существует в Firefox, но существует в Google Chrome.

Answer 1

Хорошо.Нашел ответы.

Ответ на вопрос № 1 ... Необходимо явно изменить свойство переполнения элемента таблицы со значения по умолчанию «visible» на «auto» или «scroll».

  overflow: scroll;
  display: grid;
  border-collapse: collapse;
  min-width: 100%;
  /* These are just initial values which are overriden using JavaScript when a column is resized */
  grid-template-columns: 
    minmax(150px, 1fr)
    minmax(150px, 1.67fr)
    minmax(150px, 1.67fr)
    minmax(150px, 1.67fr)
    minmax(150px, 3.33fr)
    minmax(150px, 1.67fr)
    minmax(150px, 3.33fr)
    minmax(150px, 1.67fr);
}

Ответ на вопрос № 2 ... Необходимо предотвратить поведение браузера по умолчанию для события mousedown.Я портировал этот код на Vuejs.В Vuejs синтаксис: @mousedown.prevent="resizeInit"