Как создать прокручивающую среднюю коробку с двумя статическими коробками рядом с ним, все внутри одного контейнера? [ду ⇐ Html

[Anonymous]

Введите описание изображения здесь < /p>
Я собираюсь сделать что-то вроде прикрепленного изображения, я попытался сделать < /p>


.container {
margin: 20;
display: flex;
border: 3px solid black;
height: 1000px;
width: 1000px;

}

.box {
flex: 1;
margin: 0px;
padding: 40px;
border: 0px solid #ccc;
background-color: yellow
}

.box2 {

flex: 1;
margin: 0px;
padding: 40px;
border: 0px solid #ccc;
background-color: blue;
overflow: auto;
}

.box3 {
flex: 1;
margin: 0px;
padding: 40px;
border: 0px solid #ccc;
background-color: red
}< /code>

Box 1
Box 2
Box 3
< /code>
< /div>
< /div>
< /p>
Но обнаружил, что я не могу сделать прокрутку средней коробки. Я бы хотел сделать так, чтобы все было содержатся в одном контейнере, но средняя область должна прокручивать, а стороны должны оставаться такими, какие они есть, поскольку я пытаюсь сделать эффект границы с фоном. Любая помощь ценится спасибо! < /p>
Я попытался добавить переполнение: auto; в одну из ящиков, учитывая, что в прошлом работал для контейнера, но это, похоже, не сработало.


Подробнее здесь: https://stackoverflow.com/questions/795 ... all-inside