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

Question

[vasya2004]

Всем доброго времени суток!

Пример ситуации: https://codepen.io/hihihi05/pen/qBrBbKr

Нужно сделать так, чтобы блок "left" был оцентрован по центру, а также имел отступ, как у основного контейнера, а блок "right" по ширине занимал все доступное пространство. Я попытался для left-блока задать ширину через vw, max-width: 522px(ширина по макету) и отступ слева margin-left: calc(35vw - 522px).

Проблема: На разрешении 1920 вроде все норм. Но, когда начинаю сужать экран, отступ слева у left-блока начинает не соответствовать отступу контейнера.

Вопрос: как сделать это можно исправить, не закидывая два этих блока в общий контейнер?

Comments

[Forgetful]

Можно попробовать задать отступ в %

[Forgetful]

Или использовать медиа запросы

[vasya2004]

Forgetful Как в процентах? Допустим я задал левый марджин 8%, чтобы на 1920 смотрелось нормально. Но при уменьшении он совсем не соответствует отступу контейнера.

Медиа-запросы: на разрешении менее 1600 там да, так и планировалось. Но в промежутке между 1920 и 1600 контейнер и блок не вровень идут. Или как вы будете реализовывать это с помощью медиа-запросов?

[Froggyweb]

https://www.youtube.com/watch?v=nTtuiBXKp88
очень полезно

Answer 1

[IIIu6ko]

Не совсем понятно ТЗ, возможно вы добивались этого?

Comments

[vasya2004]

Почти. Зеленый блок должен растягиваться до правого края экрана

[vasya2004]

То есть у красного блока отступ слева как и у контейнера на разрешении от 1920 до 1600. А правый блок растягивается до конца экрана

[IIIu6ko]

vasya2004, обновил. Единственное, пришлось выставить overflow-x: hidden; т.к. 100vw - не учитывает ширину скролла и из-за этого появляется горизонтальная прокрутка.

[vasya2004]

IIIu6ko, Спасибо большое. Это то, что мне нужно. В конце спрошу, могу ли я заменить везде vw на проценты, чтобы избежать проблемы скролла?

[IIIu6ko]

vasya2004, width у left да, у right margin-right уже нет. Советую ещё для left добавить flex-shrink: 0, чтобы при переполнении right он не сжимал left.

[vasya2004]

IIIu6ko, Отлично. Спасибо большое!