I'm attempting to create a responsive content box that shrinks properly when the browser size is reduced.
https://i.sstatic.net/wQD8j.png
However, I am facing an issue where the content (yellow) does not shrink and instead overflows horizontally when the browser is minimized too much. I want it to shrink appropriately until it reaches a minimum width.
.content_wrapper{
max-width: 1330px;
display:flex;
flex-wrap: wrap;
margin: 0 auto;
padding: 0 20px;
}
.content_box{
width: calc(18%);
height: 300px;
background: rgb(255, 255, 166);
margin: 1%;
}
@media all and (max-width: 600px){
.content_box{
width: 100%;
margin-top: 0;
margin-left: 0;
margin-right: 0;
margin-bottom: 15px;
}
.content_wrapper{
padding:0 15px;
margin: 0;
}
}<div class="content_wrapper">
<div class="content_box"></div>
<div class="content_box"></div>
<div class="content_box"></div>
<div class="content_box"></div>
~~~~
</div>You can view the codepen here: