2 колонки с дополнительной полосой прокрутки для левой колонки, используя только css

Question

У меня есть список плоских элементов div (к сожалению, я не могу редактировать html разметку для добавления структур). Поскольку div # 1 очень длинный, я хотел бы поместить его в отдельный столбец с собственной полосой прокрутки; все остальные элементы div (количество элементов div является гибким) располагаются в правом столбце. Какова наилучшая настройка css для достижения этой цели? В идеале я не хочу использовать фиксированную / абсолютную позицию.

<div id='1'>1</div>
<div id='2'>2</div>
<div id='3'>3</div>
.
.
.
<div id='n'>n</div>

Answer 1

Вы можете использовать Flex для достижения этого результата, проверьте пример :

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

.column div {
  background-color:#bbb;
  height:50px;
}

.column div:not(:first-child) {
  margin-top:5px;
}

<div class="row">
  <div class="column">
    <div style="height:500px;">div 1</div>
  </div>
  <div class="column">
    <div>div 2</div>
    <div>div 3</div>
  	<div>div n</div>
  </div>
</div>

Answer 2

Вы можете использовать эту структуру для этого. В этом я использовал свойство display:flex, поэтому вам не нужно использовать какую-либо позицию.

.main {
    display: flex;
}

.blue {
    height: 600px;
    background-color: blue;
    width: 200px;
    border: 3px solid black;
    margin-right: 30px;
}

.red {
    height: 150px;
    background-color: red;
    width: 150px;
    border: 3px solid black;
    margin-bottom: 10px;
}

<div class="main">
        <div class="left">
            <div class="blue"></div>
        </div>
        <div class="right">
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
        </div>
    </div>