высота 100% с гибкой пленкой

Question

Я сделал макет с Flexbox.

Когда я использую flex-wrap: wrap, другие элементы не покрывают полную высоту.

body {
  height: 100%;
}

.wrap {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  background-color: antiquewhite;
  justify-content: center;
}

.box {
  margin: 10px;
  width: 300px;
  height: 300px;
  background-color: azure;
}

.modal {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

<div class="wrap">
  <div class="modal">Modal</div>
  <div class="box">1</div>
  <div class="box">1</div>
  <div class="box">1</div>
  <div class="box">1</div>
  <div class="box">1</div>
  <div class="box">1</div>
  <div class="box">1</div>
</div>

Я ожидаю, что .modal покрывает 100% высоты, но это не так.

Как я могу сделать 100% высоты до .modal?

Спасибо.

Answer 1

Добавить position: relative к классу . wrap: