Create responsive layout with 4 square buttons

Question

I would like to create a layout like this one:

The black border indicates the width of the window (or the container). The pink squares are simple divs that I will then treat as buttons. They always have all four the same size and are always square.

The maximum width of the single button must be 300px and the minimum 50px. When there is enough space, all four buttons are on the same line, otherwise the last two are positioned on a new line. The buttons are resizable. The important thing is that they are never smaller than 50px and are always square.

How can I do? I tried using Flexbox like this: https://codepen.io/anon/pen/NVpzYe

But obviously it doesn't work. Then I don't know how to set the right height.

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.firstChildren {
  width: 50%;
  border: 1px solid black;
  display: flex;
  height: 50px;
  minWidth: 50px;
}

.secondChildren {
  width: 50%;
  border: 1px solid black;
  height: 50px;
}

<div class="container">
  <div class="firstChildren">
    <div class="secondChildren" />
    <div class="secondChildren" />
  </div>
  <div class="firstChildren">
    <div class="secondChildren" />
    <div class="secondChildren" />
  </div>
</div>