Два блока посредине на flexbox

Question

Казалось бы - простая структура блоков, которые должны визуально вылазить за пределы wrapper (оборачивать wrapper-ом не обязательно, указал для наглядности) и растягиваться на узком экране до 1000px на всю ширину. Но увы, ничего не выходит.

При этом, блоки должны оставаться зависимыми друг от друга, т.е. растягиваться по высоте контента одного из блоков. Также не понятно, как лучше сделать промежуток в середине 20px, margin-ом или отдельным div-ом?

Фрагмент кода, который выполняется все условия за исключением промежутка в середине и блоки не вытягиваются на всю ширину экрана, как на картинке выше. Есть ли решение у этой задачи?

<div class="container" style="background:gray;width:100%">
  <div class="wrapper" style="margin:0 auto;display:flex;width:100%;max-width:1000px;">
    <div class="block left" style="width:50%;padding:35px;background:#7e87ab">text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text</div>
        <div class="block right" style="width:50%;padding:35px;background:#83ab7e">text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text</div>
  </div>
</div>

Answer 1

Промежуток делается свойством gap. Текст надо обернуть блоком с ограничением на максимальную ширину. Максимальная ширина равна 1000px/2 - gap/2 - padding

.container {
    display: flex;
    gap: 20px;
    width: 100%;
}

.container > div {
    width: 100%;
    padding: 35px;
}

.left {
    background: #7e87ab;
}

.right {
    background: #83ab7e;
}

.text {
    max-width: 455px; /* 1000px/2 - 20px/2 - 35px */
}

.text-left {
    margin-left: auto;
}

<div class="container">
  <div class="left">
    <div class="text text-left">text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text</div>
    </div>
  <div class="right">
    <div class="text">text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text</div>
  </div>
</div>

БЛОГ НА HUSL

Два блока посредине на flexbox

Ответы (1 шт):