Как сверстать такой layout?

Question

[Андрей]

Привет! Часто сталкиваюсь с такой задачей, и каждый раз находятся новые костыли, порой довольно неочевидные.

Вопрос в следующем. Есть хедер фиксированной ширины, есть строка с фильтрами, которая при переполнении может переносить элементы на следующую строку и есть блок результатов, который должен заполнять оставшееся место, при этом страница не должна превышать 100vh, при прокрутке желательно отобразить "общий" скролл (сейчас я решаю это свойством overflow: auto и появляется локальный скролл для блока результатов), но скроллиться должен только блок результатов (пример).

Также, для наглядности, запилил рисуночек.



Загвоздка еще в том, что на этой же странице может быть отображена карта:

Comments

[alex]

элеметарщина. делается на flexbox/grid

[Андрей]

alex, спасибо!

Answer 1

[Ariakas]

Если я правильно понял.
https://codepen.io/Ariakas/full/eYNYewX

Comments

[Андрей]

Всё верно, спасибо! Правда уже сверстал, немного другим путем)

Answer 2

[Kotovasofa]

Возможно я не дочитала, но в чём в итоге у вас проблема?
header у вас фиксированный(фильтры на флексах с примерами дальше), левые блоки с карточками(назовите как удобно) - делаете флексами - flex-basis, flex-wrap, justify-content.Ваша правая часть остается всегда видимой - position: sticky.
Разметка очень типовая, решается легко и с флексами и с гридами. Всё остальное уже за логикой(SPA\фреймворки).

Comments

[Андрей]

https://codepen.io/andrej-rusinas/pen/ZEGzZNO

[Андрей]

Вы действительно не совсем поняли вопрос)
При чем тут "spa/фреймворки"

[Kotovasofa]

Андрей, При чем тут "spa/фреймворки" - притом, что разметка на уровне базового знания флексов и гридов.

Есть хедер фиксированной ширины,

- code>position: fixed

есть строка с фильтрами, которая при переполнении может переносить элементы на следующую строку

flex-wrap: wrap - min-heitght: 100px

и есть блок результатов, который должен заполнять оставшееся место, при этом страница не должна превышать 100vh

- flex-grow: 1, max-heght: 100vh
Правый блок с картой - position: sticky

[Алексей]

Разделить результаты на два блока. Где карты нет - сделайте разметку флексами и гридами и не забудьте для этого блока указать overflow: auto; и максимальную высоту не превышающую 100vh - высота хедера и поисковой строки