Stretch a relative div to the height of its static parent - html

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>

Answer 1

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;
}

Answer 2

You just have to make one change in your CSS. Add "height:100%" to your div.dropZone selector. I hope that helps.
You can run the code snippet below to try it out.
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;
height: 100%;
}
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>