使绝对div占据父级的100％高度

Question

I have a div whose size depends on its content. I want to have an absolute child which takes the whole space.

In Firefox I get the wanted result but not in Chromium. How to fix it?

Which browser is rendering against the specification?

 <div style="position:relative;float:left;"> <div style="position:absolute;display:table;left:0;top:0;height:100%;width:100%;background:red;"> <div style="display:table-cell;vertical-align:middle;">TEST</div> </div> <!-- this is an img in real with unknown size --> <div style="width:200px;height:200px;background:yellow"></div> </div> 

Answer 1

You just need to change the display of this div to display:flex and use margin: auto to center the text:

 <div style="position:relative;float:left"> <div style="position:absolute;display:flex;left:0;top:0;height:100%;width:100%;background:red;"> <div style="margin: auto">TEST</div> </div> <!-- this is an img in real with unknown size --> <div style="width:200px;height:200px;background:yellow"></div> </div> 

Or with display: flex and align-items: center :

 <div style="position:relative;float:left"> <div style="position:absolute;display:flex;left:0;top:0;height:100%;width:100%;background:red;align-items: center"> <div>TEST</div> </div> <!-- this is an img in real with unknown size --> <div style="width:200px;height:200px;background:yellow"></div> </div>