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にラップを追加する必要があります。アルドは

#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; 
} 

をsecondRowするオーバーフローを追加#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>