高度 100% 使用 flex-wrap答案

【问题标题】：height 100% with flex-wrap高度 100% 使用 flex-wrap
【发布时间】：2018-06-05 13:43:57
【问题描述】：

我用 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% 的高度，但事实并非如此。

如何将 .modal 设为 100% 高度？

谢谢。

【问题讨论】：

标签： css flexbox height

【解决方案1】：

将position: relative 添加到. wrap 类中：

【讨论】：

太棒了！无论如何，将相对位置放在父级上是个好主意，否则您的模态将相对于 body 标签定位，这通常不是您想要的。见这里：w3schools.com/Css/css_positioning.asp
我会检查的。感谢回复！