CSS только горизонтальная прокрутка, гибкая вертикальная

Question

Я пытаюсь создать реактивный веб-сайт, который изменяется с шириной экрана. На широком экране, scoreDiv имеет горизонтальную и вертикальную прокрутку. Однако на экране с меньшей шириной я хочу, чтобы у scoreDiv была только горизонтальная прокрутка и гибкость в вертикальном направлении (я не уверен, использую ли я правильную терминологию, надеюсь, это имеет смысл). Когда я пытаюсь использовать overflow-x: scroll, по какой-то причине он также прокручивается в направлении y. Любая помощь приветствуется!

CSS & HTML

#secondRow { 
 
    position: relative; 
 
    width: 100%; 
 
    display: flex; 
 
    flex: 1 1 auto; 
 
    flex-direction: row; 
 
} 
 

 
#controlSidebar { 
 
    text-align: center; 
 

 
    border-right: 3px solid teal; 
 
    background-color: white; 
 
    background-size: cover; 
 
    width: 375px; 
 
} 
 

 
#scoreDiv { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex: 1 1 auto; 
 
    overflow: auto; 
 
    padding-right: 1em; 
 
} 
 
@media only screen and (max-width: 600px) { 
 
    #secondRow { 
 
    flex-direction: column; 
 
    } 
 

 
    #controlSidebar { 
 
    text-align: center; 
 

 
    width: auto; 
 
    border-right: 0; 
 
    border-bottom: 3px solid teal; 
 
    background-color: white; 
 
    background-size: cover; 
 
    padding-bottom: 2em; 
 
    } 
 

 
    #scoreDiv { 
 
    overflow-x: scroll; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
}

<div id="secondRow"> 
 
    <div id="controlSidebar"> 
 
    <!--content--> 
 
    </div> 
 
    <div id="scoreDiv"> 
 
    <!--content--> 
 
    </div> 
 
</div>

EDIT Я должен отметить, что у меня есть боковая панель, которая остается слева на широком экране и остается на вершине для узкого экран. Я обновил код, чтобы отразить это. Я также нарисовал picture, чтобы показать, чего я пытаюсь выполнить. This - проблема, которую я имею прямо сейчас.

Answer 1

Вам необходимо удалить переполнение и не добавлять завертывание к scoreDiv. Aldo добавить переполнение secondRow

#secondRow { 
    border: 1px solid #ccc; 
    overflow: auto; 
    position: relative; 
    width: 100%; 
    display: flex; 
    flex: 1 1 auto; 
    flex-direction: row; 
    float: left; 
    width: calc(100% - 380px); 
} 
#controlSidebar { 
    text-align: center; 
    border-right: 3px solid teal; 
    background-color: white; 
    background-size: cover; 
    float: left; 
    width: 375px; 
} 
#scoreDiv { 
    display: flex; 
    flex-direction: row; 
    flex: 1 1 auto; 
    padding-right: 1em; 
    white-space: nowrap; 
} 

#controlSidebar необходимо будет перемещен за пределами #secondRow, потому что #secondRow выступает в качестве контейнера для прокрутки содержимого. Я добавил следующий HTML-код для тестирования

<div id="controlSidebar"> 
    <!--content--> 
    menu 
</div> 
<div id="secondRow"> 

    <div id="scoreDiv"> 
     <!--content--> 
     content content 1 content 2 content 3 content 4 content 5 content 6 content 7 content 8 content 9 content 10 content 11 content 12 content 13 content 14 content 15 content 16 content 17 content 18 content 19 content 20 content 21 
    </div> 
</div>