I am making a flex box with max and min width applied. but not working when i reduce the page size. it shows the blank area. how to fix it?
.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 min size lesser than the expected, it’s not moving to 100%. but shows the empty space
>Solution :
Because max-width is not the same as width.
You have to tell the element to expand as much as possible to it’s max-width, in this case with flex:1
.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%;
flex:1;
}
.parent div:last-child{
background-color: red;
margin:0 auto;
} <div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>