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

Я пытаюсь сделать реактивный сайт, который изменяется с шириной экрана. На широком экране 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>

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

2 ответа

  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>