Липкая позиция для контейнеров Flexbox

Question

Я построил горизонтальный макет флексбокса с двумя элементами, каждый из которых представляет собой вертикальный флексбокс.

Вот текущее поведение: при прокрутке вниз красный контейнер нормально прокручивается. Синий контейнер прилипнет, а затем прокрутится вместе с красным в какой-то момент. Это проблема, потому что последние несколько синих элементов никогда не будут видны, если я не прокручиву до конца страницы. Но если я добавлю событие прокрутки, чтобы добавить больше красных контейнеров, это никогда не произойдет.

Вот предполагаемое поведение: оба контейнера будут прокручиваться нормально, пока не появится последний синий прямоугольник. Тогда синий контейнер перестанет прокручиваться.

Вопросы:

1. Как мне достичь намеченного поведения?

2. В настоящее время почему сделал прокрутку для остановки синего контейнера, затем снова начал, чтобы выровнять с красным контейнером.

.wrapper{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    border: 2px dashed rgba(114, 186, 94, 0.35);
    background: rgba(114, 186, 94, 0.05);
}

.item{
    display: flex;
    flex-direction: column;
}

div{
    min-width: 100px;
    min-height: 100px;
    margin: 10px;
}

.red{
    background-color: red;
}
.blue{
    background-color: blue;
}
.sticky{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

<div class="wrapper">
        <div class="item">
            <div class="red">First</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 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 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 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 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 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 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 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 class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red">Last</div>
        </div>
        <div class="item sticky">
            <div class="blue">1</div>
            <div class="blue">2</div>
            <div class="blue">3</div>
            <div class="blue">4</div>
            <div class="blue">5</div>
            <div class="blue">6</div>
            <div class="blue">7</div>
            <div class="blue">8</div>
            <div class="blue">9</div>
            <div class="blue">10</div>
        </div>
        
    </div>

Answer 1

Чтобы достичь желаемого, вам нужно иметь отрицательное значение для top, равное разнице между высотой экрана и высотой элемента.

Я не знаю, будет ли у вас динамик c номер элемента, но если я учту тот факт, что у вас будет известное количество синего элемента, вы можете легко сделать это, как показано ниже

.wrapper{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    border: 2px dashed rgba(114, 186, 94, 0.35);
    background: rgba(114, 186, 94, 0.05);
}

.item{
    display: flex;
    flex-direction: column;
}

div{
    min-width: 100px;
    min-height: 100px;
    margin: 10px;
}

.red{
    background-color: red;
}
.blue{
    background-color: blue;
}
.sticky{
    position: sticky;
    top: calc(100vh - 10*(100px + 20px));
}

<div class="wrapper">
        <div class="item">
            <div class="red">First</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 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 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 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 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 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 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 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 class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red">Last</div>
        </div>
        <div class="item sticky">
            <div class="blue">1</div>
            <div class="blue">2</div>
            <div class="blue">3</div>
            <div class="blue">4</div>
            <div class="blue">5</div>
            <div class="blue">6</div>
            <div class="blue">7</div>
            <div class="blue">8</div>
            <div class="blue">9</div>
            <div class="blue">10</div>
        </div>
        
    </div>