Блог

У меня есть родительский контейнер, содержащий 3 внутренних дива. Я хочу, чтобы только средний внутренний div прокручивался горизонтально. Вот мой код:

 <div class="outer-container">
    <div class="top-inner-container">
        xoxoxoxoxoxo    
    </div>
    <div class="middle-inner-container">
        only this must scroll ===> yeah yeah yeah        
    </div>
    <div class="bottom-inner-container">
        oxoxoxoxoxox
    </div>
</div>
 

 .outer-container {
    height: 470px;
    position: relative;
}
.top-inner-container {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    height: 70px;
}
.middle-inner-container {
    white-space: nowrap;
    width: 1480px;
    background-color: grey;
    overflow-x: scroll;
    position: absolute;
    top: 60px;
    left: 0px;
    height: 340px; 
    display: flex; 
}
.bottom-inner-container {
    position: absolute;
    // background-color: #fff;
    width: 100%;
    top: 404px;
    left: 0px;
}
 

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

Обновление: Чтобы повторить. Вместо того, чтобы просто прокручивать средний раздел по горизонтали, прокручиваются все 3 раздела. Полоса прокрутки отображается на родительском элементе, а не только на div с классом средний-внутренний-контейнер. Желаемый результат-это когда горизонтально прокручивается только div со средним внутренним контейнером класса.

важный
Пока игнорируйте вертикальную прокрутку. Я просто понимаю, что с большим количеством контента вертикальная прокрутка работает. Меня не волнует вертикальная прокрутка, просто горизонтальная прокрутка. Верх и низ не должны прокручиваться горизонтально, только средний div должен прокручиваться горизонтально. «xoxoxoxoxo» всегда должно быть видно на экране при горизонтальной прокрутке. Спасибо.

Вот скрипка

Вы можете настроить горизонтальную прокрутку среднего контейнера, добавив white-space: nowrap; его в .middle-inner-container класс.

css выглядит так:

 .outer-container {
    height: 470px;
    position: relative;
    width: 100%;
    .top-inner-container {
        width: 100%;
        height: 70px;
    }
    .middle-inner-container {
        white-space: nowrap;
        background-color: grey;
        overflow-x: scroll;
        height: 340px;
        .block {
            display: inline-block;
            vertical-align: top;
        }
    }
    .bottom-inner-container {
        // background-color: #fff;
        width: 100%;
        top: 404px;
        left: 0px;
    }
}
 

не забудьте добавить блок класса в каждый подраздел в среднем разделе.