Как сделать что бы развернутый блок не двигал соседние блоки в строке?

Question

[Haleksandr]

Подскажите пожалуйста, как сделать что бы при нажатии на "preview 2", блок "preview 1" блок не делал отступ снизу к блоку "preview 3.
То есть должно быть поведение когда нажимаешь на блок "preview 2" и он открывается, что бы он двигал только "preview 4", но "preview 1" и "preview 3" не двигались.

Вот пример кода на CODESANDBOX

Comments

[FrelFrloich]

height: max-content; к блоку поставь. Но зачем тебе вью если ты css не знаешь, это загадка.

[Haleksandr]

FrelFrloich,
И что поменялось?

[Pavel-ww]

Haleksandr, вроде должно быть очевидно, что при такой HTML разметке это сделать не возможно, по крайней мере с помощью CSS

[Haleksandr]

Pavel-ww, ну поменять разметку можно, как посоветуете сделать?

[Pavel-ww]

Haleksandr, две дополнительные обёртки-колонки. Сейчас вам общий Flex контейнер не дает сделать то что вы хотите.

[Haleksandr]

Pavel-ww, спасибо, сделал 2 обертки, проблему решил

Answer 1

[MisterVerstalschyk]

Добрый день. Попробуйте блок с контентом, который открывается, задать z-index: 20. Тогда он будет поверх него. Если не выйдет, уточняйте вопрос - попробую помочь!!!