绝对父母的亲戚可以有一个precentege高度？

Question

我有一个绝对的div然后是三个相对的孩子，当我尝试根据百分比设置高度和宽度它不起作用而高度和宽度最终基于内容而不是，为什么是什么？

.messageBox {
  width: auto;
  min-width: 22%;
  min-height: 20%;
  position: absolute;
  display: flex;
  align-content: center;
  flex-direction: column;
  border: solid;
  border-color: white;
  border-width: 5px;
  background: black;
  z-index: 97;
}

.messageBoxTitle {
  width: 100%;
  height: 20%;
  min-height: 20%;
  position: relative;
  font-size: 1vw;
  margin-top: 0px;
  background: red;
}

.messageBoxMessage {
  width: auto;
  height: 50%;
  min-height: 50%;
  text-align: center;
  font-size: 1.5vw;
  position: relative;
  margin-top: 5px;
  background: green;
}

.messageBoxControls {
  width: auto;
  height: 30%;
  min-height: 30%;
  font-size: 1.5vw;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  margin-top: 5px;
  background: blue;
}

<div class="messageBox" draggable="true">
  <div class="messageBoxTitle">Message Box Title</div>
  <div class="messageBoxMessage">Text within a message box goes here.</div>
  <div class="messageBoxControls">Button</div>
</div>

在整页上运行代码段，否则您将看不到它正常运行的内容。

Answer 1

这与相对或绝对定位无关。没有任何元素具有非百分比的宽度或高度，因此没有任何百分比可以基于。