CODEWITHSUNDEEP
htmlcss
Abs
Abs

Reputation: 165

Can a relative child of an absolute parent have a precentege height?

I have a div which is absolute and then three children that are relative, when I try to set height and width based on a precentage it does not work and the height and width ends up being based on the contents instead, why is that?

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

Run the snippet on a full page, otherwise you won't see what it does properly.

Upvotes: 0

Views: 39

Answers (1)

BoltClock
BoltClock

Reputation: 723428

This has nothing to do with relative or absolute positioning. None of your elements has a non-percentage width or height, so there is nothing for the percentages to be based off of.

Upvotes: 2

Related Questions