Могу ли я в любом случае синхронизировать высоту, когда высота ящиков изменяется в зависимости от фильтров? ⇐ CSS

[Anonymous]

Я делаю интерфейс сравнения. Я хочу выровнять каждый левый элемент с правым. Иногда одна сторона div может быть пустой, поскольку содержимое изменяется в зависимости от фильтра, но оно все равно должно занимать то же место, что и другая сторона. Чтобы все остальные элементы соответствовали друг другу.
Моя HTML-структура такая:

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

first
first
first


first
first





second
second
second


second
second
second

Из-за сложности передачи данных я не могу изменить структуру HTML и иметь похожие элементы в div.
Поэтому теперь я синхронизирую высоту с javascript. С этим кодом мне это удалось.

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

React.useEffect(() => {
const resizeObserver = new ResizeObserver(() => {
requestAnimationFrame(() => {
const maxHeights =
items[0]?.map((_, i) =>
Math.max(...items.map((item) => item[i]?.offsetHeight || 0))
) || [];

for (const elements of items) {
for (let i = 0; i < elements.length; i++) {
const elem = elements[i];
elem.style.height = `${maxHeights[i]}px`;
}
}
});
});

items.flat().forEach((item) => resizeObserver.observe(item));

return () => {
items.flat().forEach((item) => resizeObserver.unobserve(item));
};
}, [items]);

Но когда пользовательский интерфейс меняется в зависимости от фильтров, высота блоков не адаптируется. Поскольку я устанавливаю исправление синхронизации высоты. Высота блоков никогда не меняется при изменении содержимого, поэтому resizeObserver не запускается.
Я пробовал установить minHeight, это помогает, когда высота увеличивается, но не помогает, когда высота уменьшается.

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

elem.style.minHeight = 

${maxHeights}px

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

;

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

Подробнее здесь: https://stackoverflow.com/questions/785 ... e-based-on