How to make child grow and wrap below first element? - html

Question

I have a parent, that contains 2 child elements, the second contains 3 (grey) other child elements that a set to automatically wrap, only problem is that the second container doesn't wrap under the first, since It's a bit hard to explain I've recreated the exact issue, here's a jsfiddle since the container can be dragged to better understand the issue.
Desired result:
[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

What you're trying to do isn't possible as long as you have your pick div separate to the others - you would need to combine the three container divs with your pick div (like the snippet below).
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>

Answer 2

Why do you use the flex display on parent element?
What about using directly block display on parent element and define a fix width.
HTML:
<div class="parent">
<div class="pick">
<h2>first box</h2>
</div>
<div class="others">
<div class="container">
<h2>1</h2>
</div>
<div class="container">
<h2>2</h2>
</div>
<div class="container">
<h2>3</h2>
</div>
</div>
</div>
CSS:
body { background-color: #20262e }
.parent { display: block; width: 307px; }
.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; }
.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; }

Answer 3

You can only wrap the contents that are inside the div. If you want to do so all the components should be under the same div. Check the js fiddle.
enter code herehttp://jsfiddle.net/L91kebox/9/