flex-box как сделать более отзывчивые «коробки»

Question

Я хочу, чтобы ящики были более отзывчивыми и всегда сохраняли соотношение 1: 1.Когда я устанавливаю min-width для .box1, .box2, они всегда принимают всю ширину .box!И это похоже на то, что они не реагируют на высоту?

Я не хочу, чтобы ящики были на всю ширину (или высоту) гибких элементов, так как мне нужно пространство между ними, и я нехочу, чтобы они переполнили свой контейнер .box, .. (я хочу держать их внутри)

Я знаю, что могу использовать медиазапросы для изменения размера .box1, .box2, .box3, .. но есть ли другиекстати?

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  //margin:0 -40px;
}


/*first two children*/

.grid>.box:not(:last-child) {
  background: grey;
  width: 50%;
}

.box1,
.box2,
.box3 {
  border: 2px solid #111;
  width: 100px;
  height: 100px;
  transform: rotate(-45deg);
  text-align: center;
}

.box1,
.box2 {
  margin: 0 auto;
}

.box p {
  position: relative;
  color: white;
}

<div class="wrapper">
  <div class="grid">
    <div class="box">
      <div class="box1">
        <p>Here is something !</p>
      </div>
    </div>
    <div class="box ">
      <div class="box2"></div>
    </div>
    <div class="box ">
      <div class="box3"></div>
    </div>
  </div>
</div>

Answer 1

Я не получил ваш полный запрос, но если вы хотите, чтобы квадрат был адаптивным, не настраивая его высоту вручную, воспользуйтесь взломом padding

.box1,
.box2,
.box3{
        width: 100%;
        height: 0;
        padding-bottom: 50%;
        postition:relative
        background: red;
    }