css, how to combine shape-outside and flex-wrap? - html

Question

I'm trying to combine flex-wrap and shape-outside to get something like this :
What i want to do is : the blue zone to flex-wrap it's content, and to be on the right and bottom of the grey zone :
adding display: flex; break the shape-outside
Any tips ? thanks
A JSfiddle :
https://jsfiddle.net/81b3cLxf/
HTML
<div class="main">
<div class="left"></div>
<div class="flex-container wrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
</div>
</div>
CSS
.main {
width: 600px;
height: 500px;
box-sizing: border-box;
overflow: hidden;
background-color: black;
padding: 10px;
}
.left {
width: 50%;
height: 200px;
background-color: lightgray;
shape-outside:"none";
float: left;
}
.flex-container {
height: 100%;
background-color: blue;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
.wrap {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
width: 75px;
height: 75px;
margin: 10px;
line-height: 75px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}

Answer 1

Please check my example with grid:
.main {
width: 600px;
height: 500px;
box-sizing: border-box;
overflow: hidden;
background-color: black;
padding: 10px;
}
.left {
grid-column: span 3;
grid-row: span 2;
background-color: lightgray;
}
.flex-container {
height: 100%;
background-color: blue;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
grid-gap: 10px;
grid-auto-rows: 85px;
}
.flex-item {
background: tomato;
padding: 5px;
width: 75px;
height: 75px;
margin: 0;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
<div class="main">
<div class="flex-container wrap">
<div class="left"></div>
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
<div class="flex-item">10</div>
</div>
</div>