Как сделать выезжающий боковой блок, чтобы он сжимал контент?

Question

[Михаил]

Всем добрый день!
Есть такой вопрос, мне его задали на собеседовании, я не смог ничего толком придумать...
Надо сделать , чтобы выезжал боковой блок (это может быть корзина или меню и т.п.) и при этом чтобы основное содержимое не сдвигалось в сторону, и не оставалось на месте, а сжималось!
Как будто мы сжимаем экран. При этом некоторые блоки могут вести себя адаптивно, перестраиваться, вставать друг под друга и т.д.

Comments

[AleninD]

Ваше меню(любой боковой блок) изначально скрыто за областью видимости, допустим свойством transform => при клике на кнопку "бургера"(меню), ваш контент, который имеет ширину в %, с помощью js меняет размеры, допустим из декстоп версии перестраивается в tablet, при этом все ваши элементы должны иметь процентную ширину, т.е резиновые блоки. Первое что приходит в голову. Как оно будет в реале => надо щупать)

[Rustam Bainazarov]

Отрицательным margin на ширину блока внутри flex'a без wrap или изменением ширины.

Answer 1

[Ankhena]

Родитель флекс, в нем 2 блока: боковой и основной. Боковому меняете ширину, у основного flex:1

https://jsfiddle.net/musg4qnh/