html - ディスプレイを使用してアイテムを何かの上にオーバーレイする：テーブルセルと最小の高さ

Question

使用display: table-cellする場合、その要素を指定することはできませんposition:relative。したがって、要素全体を何か（たとえば、半透明のdiv）でオーバーレイするには、最初にコンテンツをdivでラップしてから、そのposition:relative中にオーバーレイを配置する必要があります。

しかし、ラッパーにも最小の高さを設定すると、オーバーレイが完全な高さまで拡張されず、ラッパーのコンテンツを高さに対応させる方法が見つからないようです。cssだけを使用して、display：table-cellと最小の高さでdivの上に100％の高さのオーバーレイを配置することはできますか？

<div style="table-row">
    <div style="table-cell; min-height: 100px">
        <div style="position: relative; height: 100%;"> // this refuses to extend to 100% height when the table row forces the cell height to grow
             <p> content </p>
             <div style="position:absolute; top:0;left:0;height:100%;width:100%"> // ... therefore so does this
             </div>
         </div>
    </div>
    <div style="table-cell; height: 150px"></div> // forces the entire row to grow in height
</div>