I'm struggling to make a flex box with max and min width properties work properly. When I reduce the page size, it ends up showing blank space instead of resizing. How can I troubleshoot this issue?
.parent{
border: 1px solid red;
width: 50%;
margin:0 auto;
display: flex;
flex-wrap: wrap;
}
.parent div {
background-color: yellow;
width: 50%;
min-width: 150px;;
max-width: 100%;
}
.parent div:last-child{
background-color: red;
margin:0 auto;
} <div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>When the minimum size is lower than expected, the container fails to expand to fill the available space. This leaves empty gaps in the layout. How can I address this issue?