I'm currently facing a challenge with my project regarding the utilization of flexbox.
Everything seems to be in order, but as you resize your viewport to around 1400px, the column layout collapses. I'm looking for a way to prevent this from happening. There are no media queries implemented in my CSS, so the issue does not stem from that.
The placeholder containing all the boxes is styled as follows:
#overview {
-webkit-box-flex: 4;
-moz-box-flex: 4;
-webkit-flex: 4;
-ms-flex: 4;
flex: 4;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
flex-wrap: wrap;
flex-flow: column wrap;
height: 100vw;
}
The styling for an individual box is as follows:
.video_grid {
background: rgb(255,255,255);
/* Additional Background Styling Properties */
margin: 0.5em 0em;
width: 20em;
}