How to Get Float Behavior Inside Flex Element? - html

Question

Looking to have one large item on the left and a lot of small items on the right. If the browser window is big enough, I'd like the small items to "float" in a columnar manner such that they don't exceed the height of the large item. However, when the browser shrinks, I'd like the small items to wrap down below the large one in a single row.
Here's a codepen to demonstrate: https://codepen.io/anon/pen/WXQdEN
div.container {
display: flex;
flex-wrap: wrap;
}
div.right-variable {
max-height: 320px;
align-items: center;
}
div.test-700 {
width: 700px;
height: 320px;
background: green;
color: #ffffff;
font-size: 40px;
}
div.test-100 {
width: 100px;
height: 100px;
background: red;
outline: 1px solid black;
margin: 2px;
float: left;
}
<table>
<tr>
<td>
<div class="test-700">Example Table</td>
</td>
<td>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
</td>
</tr>
</table>
<div class="container">
<div class="left-fixed">
<div class="test-700">Non-Working Flex</div>
</div>
<div class="right-variable">
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
</div>
</div>
The table shows the desired behavior of the red boxes at large resolutions. As the browser shrinks, the boxes float around to fill the space.
But when the browser gets too small to contain them, I want the flex behavior where the red boxes wrap down under the green one. I understand that this doesn't work because I can't float the items within the flex, but I don't understand how to achieve a similar behavior without float. I'd like to achieve this using flex and CSS only. Is that possible?
Thank you for any assistance.

Answer 1

The main issue here is related to sequence for wrapping and since the browser don't know which to wrap before the other, they start with the outer element.
Also, there is no property that one can set, to define the order, but there is media query, where we can set a breaking point, and in this case, use it to tell when the container is allowed to wrap.
Remove flex-wrap: wrap from the container and add it back at a desired maximum width using a media query.
Then also make the div.right-variable a flex container and have the red elements centered.
Stack snippet
div.container {
display: flex;
}
div.right-variable {
margin: auto 0; /* center vert. */
max-height: 320px;
display: flex;
flex-wrap: wrap;
}
div.test-700 {
width: 700px;
height: 320px;
background: green;
color: #ffffff;
font-size: 40px;
}
div.test-100 {
margin: auto 0; /* center vert. */
width: 100px;
height: 100px;
background: red;
outline: 1px solid black;
margin: 2px;
}
#media (max-width: 816px) {
div.container {
flex-wrap: wrap;
}
}
<div class="container">
<div class="left-fixed">
<div class="test-700">Working Flex</div>
</div>
<div class="right-variable">
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
</div>
</div>