Как исправить некорректное поведение блока при наведении в браузерах Chromium?

Question

[Alex]

Всем привет!
Описание блока:
Есть много одинаковых блоков у которых высота абзаца зафиксирована (в px), при наведении у абзаца высота становится auto.
Столкнулся с такой проблемой:
При наведении на левую колонку текст добавляется вниз и дергается весь контент при наведении на остальные колонки он просто уходит в верх. Это воспроизводится только когда проскроллишь иконку (черный квадрат). Как объяснить это поведение?
Тут исходники:

Comments

[Pavel Kuzyakin]

похоже, что это баг justify-content: space-between и overflow: hidden

Answer 1

[Сергей delphinpro]

Ощущение, что браузер самостоятельно определяет в какую сторону "расширить" контент (увеличивающийся тег параграфа) так, чтобы он был на виду. А из-за флексов возникает визуального ощущение смещения соседнего контента. На самом деле изменяется скролл страницы.

Интересно, что при наличии в области видимости других элементов, такого поведения не наблюдается. https://jsfiddle.net/s9n85rd7/106/

Вряд ли это можно исправить.

Comments

[Alex]

Спасибо, сделал прозрачные линии внизу блока чтобы был эл-т в области видимости.