Flex box max-width not working when shrinking the width of the page

Issue

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>

Answered By - Paulie_D