I've been working on replicating this layout using flexbox: https://i.sstatic.net/Fmuk2.jpg
While I've made progress with the layout, I'm encountering some strange flex-wrap behavior like this:
https://i.sstatic.net/qH8Jq.png
Here's the CSS I'm using:
.parent {
display: flex;
justify-content: space-between;
.square-container {
width: calc(33% - 1.333px);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
&:before {
content:'';
float:left;
padding-top:100%;
}
.small-square {
width: calc(50% - 2px);
height: calc(50% - 2px);
background: red;
flex-shrink: 0;
}
}
}
This is the corresponding HTML:
<div class="parent">
<div class="square-container">
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
</div>
<div class="square-container">
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
</div>
<div class="large-square"></div>
</div>
I believe there might be a crucial flexbox property that I'm overlooking. Any guidance you can provide would be greatly appreciated!