html - 如何让 child 成长并包裹在第一个元素下面？

Question

我有一个父级，它包含 2 个子元素，第二个包含 3 个(灰色)其他设置为自动换行的子元素，唯一的问题是第二个容器没有换行在第一个容器下面，因为它有点很难解释我已经重新创建了确切的问题，这里是 jsfiddle因为可以拖动容器以更好地理解问题。

期望的结果:

[box] [ 1 ] [ 2 ] [ 3 ]
-----------------------
[box] [ 1 ] [ 2 ]
[ 3 ]

body { background-color: #20262e }
.parent { display: flex; }
.pick { margin-right: 20px; min-width: 307px; min-height: 330px; width: 307px; height: 330px; background-color: #ffffff; display: inherit; justify-content: center; align-items: center; }

.others { display: inherit; flex-wrap: wrap; }
.others > .container { display: inherit; justify-content: center; align-items: center; background-color: #ddd; margin-bottom: 20px; min-width: 307px; min-height: 330px; width: 307px; height: 330px;  margin-right: 20px; }

<div class="parent">

  <div class="pick">
    <h2>first box</h2>
  </div>

  <div class="others">
    <div class="container">
      <h2>...</h2>
    </div>
    <div class="container">
      <h2>...</h2>
    </div>
    <div class="container">
      <h2>...</h2>
    </div>
  </div>

</div>

Answer 1

只要您将 pick div 与 others 分开，您就无法尝试执行此操作 - 您需要将这三个 container div 与您的pick div(如下面的代码片段)。

body { background-color: #20262e }
.parent { display: flex; flex-wrap:wrap; }
.pick { margin-right: 20px; min-width: 307px; min-height: 330px; width: 307px; height: 330px; background-color: #ffffff; display: inherit; justify-content: center; align-items: center; margin-bottom: 20px; }

.parent > .others { display: inherit; justify-content: center; align-items: center; background-color: #ddd; margin-bottom: 20px; min-width: 307px; min-height: 330px; width: 307px; height: 330px;  margin-right: 20px; }

<div class="parent">

  <div class="pick">
    <h2>first box</h2>
  </div>

    <div class="others">
      <h2>...</h2>
    </div>
    <div class="others">
      <h2>...</h2>
    </div>
    <div class="others">
      <h2>...</h2>
    </div>

</div>