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

Question

[Antonio09]

update. вот https://jsfiddle.net/1b2me4jg/
желтый блок должен растягиваться до конца экрана( не как сейчас
и не до контейнера)

----------------------------------------------------------
получается желтый цвет это весь экран
черный- контейнер

суть в том что в в первом блоке все строго по контейнеру
там понятно
в блоке под ним ( где текст и блок с итемами=слайдер)
и он выходит за контейтер
Как сделать чтобы он выходил?
ведь он центируется по первому блоку

Answer 1

[Арсений Матыцин]

Если ты хочешь сделать переполнение, то просто запрети перенос элементов внутри зеленого блока. Сделать это можно с помощью flex-wrap: nowrap, если он уже флексбокс. Но ты можешь его таким сделать, добавив свойство display: flex. Это я все еще про зеленый блок.

Но, таким образом ты не сможешь регулировать тот момент, чтобы при переполнении они достигали конца экрана. Это значит, что если фиксированный элемент слайдов будет меньше, или внутри них контент будет меньше, чем 33% от левого края зеленого блока и до конца экрана, то они будут либо не достигать, либо создавать горизонтальную прокрутку.

Между делом, чтобы снизить количество багов, тебе скорее всего потребуется дополнительно обернуть в блок, который будет занимать оставшееся от соседнего синего с текстом до конца родителя (черного).

И для того, чтобы сделать расчет размера зеленого блока, ты можешь с помощью JS считать размер экрана (ширину), отступ от левой части экрана самого зеленого блока (его левого края) и разницу присваивать ширине (width) зеленому блоку.
При этом тебе необходимо учесть все отступы, сделать проверку на ресайз (если данное решение входит в размеры горизонтально И вертикально ориентированного планшета).

Даже если ты решишь реализовать это с помощью абсолютного позиционирования, размеры тебе все равно придется считать с помощью JS.

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

Answer 2

[Triplicate]

С этого момента можно поподробнее

в блоке под ним ( где текст и блок с итемами=слайдер)
и он выходит за контейтер
Как сделать чтобы он выходил?

Comments

[Antonio09]

Triplicate, вот https://jsfiddle.net/1b2me4jg/
желтый блок должен растягиваться до конца экрана( не как сейчас
и не до контейнера)

[Triplicate]

Antonio09, Ты во .wrap используешь flex, он не даст блоку выйти за контейнер.
Место, которое занимает .text и .slider можно регулировать flex-basis, а степень сжатия элемента - flex-shrink

Answer 3

[keeplod]

У меня очень сильно отливается https://jsfiddle.net/1b2me4jg/ от ваших слов и скринов, ничего не понятно)
А вообще вытащить блок за пределы можно с помощью абсолютного позиционирования position: absolute;

Comments

[Antonio09]

keeplod, скрин и фидл это разное
фидл просто я показала что сейчас есть
на реальном примере

Answer 4

[MegaPuxapb]

возможно поможет
Как такое сверстать?