Stretch a relative div to the height of its static parent

Question

I have a div (the red box) that is in a horizontal flex box (black outline). Its height is calculated according to the heights of the other things in the flex box, in this case the tall blue boxes; this is all good.

The red div has a child -- the green box in the picture. Which is positioned relative to the red box. I'd like the green box to exactly normally cover the red box. The width is no problem, since the red box has a fixed width. But how can I say that the height of the green box should equal the height of its parent, the red box?

The reason for the green box on top of the red box is that I want the green box to expand horizontally when hovered over, but I don't want this expansion to affect the layout of other elements. Like this:

There is a JSFiddle here

div.dropZone {
  position: relative;
  font-family: serif;
  margin: 0px;
  border-radius: 5px;
  left: 0px;
  top: 0px;
  width: 2em;
  height: inherit;
  min-height: 3ex;
  background-color: green;
}

div.dropZone:hover {
  width: 4em;
  left: -1em;
}

div.dzContainer {
  position: static;
  font-family: serif;
  margin: 0px 0px 0px 0px;
  -webkit-align-self: stretch;
  align-self: stretch;
  width: 2em;
  height: auto;
  min-height: 3ex;
  background-color: red;
}

div.tall {
  position: static;
  font-family: serif;
  margin: 0px 0px 0px 0px;
  -webkit-align-self: stretch;
  align-self: stretch;
  background-color: blue;
  width: 3em;
  height: 10ex;
}

.H {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  border: 1px solid black;
}

<div class="H">
  <!-- black flex-->
  <div class="tall"> </div>
  <!-- blue static-->
  <div class="dzContainer">
    <!-- red static-->
    <div class="dropZone"> </div>
    <!-- green relative-->
  </div>
  <div class="tall"> </div>
  <!-- blue static-->
</div>

I can't see an absolute child? ... Before I'll try to explain, have you tried the given solution on e.g Safari 11 ? — Ason
That's why I suggest to use display: flex. When using Flexbox it is generally a bad idea to start using height with a percent value, and the main reason is that when a child uses it, its parent needs to have a height set, which is not how one most of the time want. Nesting flex parents/children is a better, cross browser solution. E.g. like this: jsfiddle.net/kzL693ex — Ason
The theory is that a flex child will by default, in flex row direction, stretch to fill its parent's height (align-items: stretch), which is what makes it work. — Ason
To add another answer is not necessary. These 3 answers of mine all describes and show how it all works (and would be a possible duplicate if you find that okay). stackoverflow.com/questions/46954952/… ... stackoverflow.com/questions/46997189/why-height-100-doesnt-work/… ... stackoverflow.com/questions/47839762/… — Ason

jeninja jeninja · Accepted Answer · 2019-04-19T18:54:19

If you want the green box to fill the parent height add height: 100%; to the .dropZone class.

div.dropZone {
  position: relative;
  font-family: serif;
  margin: 0px;
  border-radius: 5px;
  left: 0px;
  top: 0px;
  width: 2em;
  height: 100%;
  min-height: 3ex;
  background-color: green;
}

Stretch a relative div to the height of its static parent

2 Answers