在父親溢出隱藏的Div並列？

Question

我有3行div包裹在水平滾動的父級div中。

我需要幫助在橫向視圖上顯示2行。

我試圖將目標放在最後一行並與第二行對齊。我嘗試過，內聯flex /塊，左浮動 - 沒有工作。

這裏是我的代碼：

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：

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