Создать адаптивный макет с 4 квадратными кнопками

Question

Я хотел бы создать макет, подобный этому:

Черная рамка указывает ширину окна (или контейнера). Розовые квадраты - это простые divs, которые я потом буду рассматривать как кнопки. Они всегда имеют все четыре одинакового размера и всегда квадратные.

Максимальная ширина отдельной кнопки должна быть 300px, а минимальная 50px. Когда места достаточно, все четыре кнопки находятся на одной строке, в противном случае последние две кнопки располагаются на новой строке. Кнопки изменяемого размера. Важно то, что они никогда не меньше 50px и всегда квадратные.

Как я могу это сделать? Я попытался использовать Flexbox так: https://codepen.io/anon/pen/NVpzYe

Но, очевидно, это не работает. Тогда я не знаю, как правильно установить высоту.

.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>

Answer 1

Сохраняя ту же разметку, что и вложенные флексбоксы:

• используйте flex: 1 1 50% для firstChildren, чтобы они занимали одинаковое пространство в строке,

• установите flex: 1 на элементе secondChildren для растяжения до доступного пространства,

• установите min-width: 50px на secondChildren для минимальной ширины,

Теперь добавьте поле для полей и используйте padding-top: 100% для псевдоэлемента , чтобы сделать квадраты прямоугольников ( обратите внимание, что ограничение 300px max-width для блоков применяется к firstChild элемент, корректирующий это поле ) - попробуйте изменить размер окна и проверьте приведенный ниже фрагмент:

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.firstChildren {
  flex: 1 1 50%;
  display: flex;
  max-width: 640px; /* max-width = 300px + 4 x 10px margin */
}

.secondChildren {
  flex: 1;
  border: 1px solid black;
  min-width: 50px; /* minimum width */
  margin: 10px;
}

.secondChildren:after { /* create squares */
  content: '';
  display: inline-block;
  vertical-align: top;
  padding-top: 100%;
}

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

Answer 2

Использование flex: 0 1 ...

Внимание!

Вы должны закрыть div с </div>, а не /

См. Рабочий код

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

.firstChildren {
  display: flex;
  flex-wrap: nowrap;
  flex: 1 0 25%;
  margin: 2rem;
}

.secondChildren {
  flex: 0 1 50%;
  height: 30vh;
  background: pink;
  margin: 2rem;
  min-width: 50px;
  max-width: 300px;
}

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