Divのサイドオーバーフローで親のオーバーフローが隠されていますか？

Question

私は横にスクロールする親divに3行のdivをラップしています。

私は、横のビューで2行を表示するのに助けが必要です。

私は最後の行を対象にして2番目の行とインラインにしようとしました。私は、インラインフレックス/ブロック、左フロートを試みた - 誰も働いていない。ここで

は私のコードです：

https://jsfiddle.net/agipeeli/g1end453/1/

コード：

#wrapper { 
 
    margin: 20px; 
 
    padding: 20px; 
 
    width: 450px; 
 
    overflow-x: auto; 
 
    background: #eee; 
 
    border: 1px solid #333; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#wrapper .row-container { 
 
    padding: 20px 0 0; 
 
    display: flex; 
 
} 
 

 
.post { 
 
    background: #fff; 
 
    border: 1px solid #e4e4e4; 
 
    margin-left: 20px; 
 
    padding: 40px; 
 
    display: inline-block; 
 
} 
 

 
@media only screen and (orientation: landscape) { 
 
    #wrapper { 
 
    background-color: lightblue; 
 
    /* flex-direction: row; - combines all 3 containers into 1 row */ 
 
    } 
 
    .row-container:last-of-type { 
 
    border: 1px solid green; 
 
    display: inline-block; 
 
    } 
 
}

<div id="wrapper"> 
 
    <div class="row-container"> 
 
    <div class='post'>Post 1</div> 
 
    <div class='post'>Post 2</div> 
 
    <div class='post'>Post 3</div> 
 
    <div class='post'>Post 4</div> 
 
    <div class='post'>Post 5</div> 
 
    <div class='post'>Post 6</div> 
 
    </div> 
 
    <div class="row-container"> 
 
    <div class='post'>Post 7</div> 
 
    <div class='post'>Post 8</div> 
 
    <div class='post'>Post 9</div> 
 
    <div class='post'>Post 10</div> 
 
    <div class='post'>Post 11</div> 
 
    <div class='post'>Post 12</div> 
 
    </div> 
 
    <div class="row-container"> 
 
    <div class='post'>Post 13</div> 
 
    <div class='post'>Post 14</div> 
 
    <div class='post'>Post 15</div> 
 
    <div class='post'>Post 16</div> 
 
    <div class='post'>Post 17</div> 
 
    <div class='post'>Post 18</div> 
 
    </div> 
 
</div>

Answer 1

あなたはこのような何かを試すことができますか？あなたは微調整を行う必要があるかもしれません、メディアクエリ部分をスキップしました。

CSS：

#main { 
    width: 100px; 
    height: 200px; 
    border: 1px solid #c3c3c3; 
    display: -webkit-flex; /* Safari */ 
    -webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */ 
    display: flex; 
    flex-flow: row-reverse wrap; 
} 

#main div { 
    width: 50px; 
    height: 50px; 
border: 1px solid #f00; 
} 

はHTML：あなたは、風景の中にだけ上位2行を

<div id="main"> 
    <div>A</div> 
    <div>B</div> 
    <div>C</div> 
    <div>D</div> 
    <div>E</div> 
    <div>F</div> 
</div>