Flexbox Equal Height 4x4 Grid

Question

I am trying to create a 4x4 grid of equal height and width using flexbox

I have this so far...

.grid2x2 {
  min-height:100%;
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
}

.grid2x2 > div {
  display:flex;
  flex-basis:calc(50% - 40px);
  justify-content:center;
  flex-direction:column;
}

.grid2x2 > div > div {
  display:flex;
  justify-content:center;
  flex-direction:row;
}

.box{margin:20px;}

.box1{background-color:red;}
.box2{background-color:orange;}
.box3{background-color:purple;}
.box4{background-color:grey;}

 <div class="grid2x2">

    <div class="box box1">
        Test 1
    </div>

    <div class="box box2">
      Test 1                      
    </div>

    <div class="box box3">
        Test 1               
    </div>

    <div class="box box4">
        Test 1          
    </div>

</div>

How can I make it so that the boxes are all equal width and height?