在父溢出隐藏的并排？

Question

我有3行div包裹在父div中，水平滚动。

我需要帮助才能在横向视图中显示2行。

我尝试将最后一行作为目标并使其与第二行内联。我试过，inline-flex / block，left float - 没有一个工作过。

这是我的代码：

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

代码：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以试试这样的东西吗？您可能需要进行微调，跳过媒体查询部分。

CSS：

populate()

HTML：

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