Сохраняйте всю ширину дочернего элемента с вертикальной прокруткой внутри родительского элемента с горизонтальной прокруткой

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

Вот код HTML-кода:

<div id="container">
<div id="line1">
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
</div>

<div style="overflow-y: auto;overflow-x:hidden;height:15px;max-width: 100%; white-space: nowrap" id="line4">
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
</div>

<div id="line2">
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
</div>
<div id="line3">
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
    <div class="smallerDivs"></div>
</div>

И CSS:

    <style>
    html,body{
        height: 100%;
        overflow: hidden;
    }

    #container {
        height: 100%;
        overflow-x: auto;
        background: red;
    }

    #line1, #line2, #line3, #line4 {
        white-space: nowrap;
        padding: 20px;
        margin: 50px;
    }

    .smallerDivs {
        height: 112px;
        width: 112px;
        margin: 10px;
        display: inline-block;
        vertical-align: middle;
        background: #fff;
    }
</style>

html css responsive-design vertical-scrolling horizontal-scrolling
person Ion Scorobogaci    schedule 28.12.2020    source источник
comment
Хорошая идея — обрезать повторяющиеся элементы кода, используя комментарии или …, чтобы респондентам было легче читать.   -  person Nat Riddle    schedule 28.12.2020
comment
согласен, в следующий раз так и сделаю... лучше бы ты что-то предложил по проблеме )))   -  person Ion Scorobogaci    schedule 28.12.2020
comment
Где вы хотите, чтобы появилась вертикальная полоса прокрутки для строки 4?   -  person A Haworth    schedule 28.12.2020
comment
эй @AHaworth, я хочу, чтобы он был в конце ... но он может быть везде, идея состоит в том, чтобы отображать все элементы в этой строке, а также иметь возможность вертикальной прокрутки.   -  person Ion Scorobogaci    schedule 28.12.2020
comment
@AHaworth, что означает, что когда я прокручиваю родительский div по горизонтали, строка 4 также должна прокручиваться вместе с остальной частью элемента, но в то же время должна быть прокручиваемой по вертикали :) .. но как только я добавил к ней вертикальную прокрутку, это не так. отобразить все элементы в этой строке :(   -  person Ion Scorobogaci    schedule 28.12.2020
comment
@AHaworth, вот что происходит при горизонтальной прокрутке родительского элемента div, строка 4 не отображает все элементы из-за ширины, я думаю :( photobox.co.uk/my/photo/full?photo_id=503625456558   -  person Ion Scorobogaci    schedule 28.12.2020
comment
К сожалению, я думаю, что вы сталкиваетесь с этим: [ссылка]stackoverflow.com/questions/18135204/, где переполнение-x изменяется на автоматический (поэтому вы видите горизонтальную полосу прокрутки), когда вы меняете переполнение- у. Кажется, это то, что делают все браузеры. Хм.   -  person A Haworth    schedule 29.12.2020