フレックスボックス要素内の絶対配置要素の伸びの高さ

Question

コンテナはdisplay: flexに設定されていますが、その中に2つの子があります。子供1は高さが設定され、子供2はposition: absoluteです。私は親要素の高さに伸びる子2の高さを作る方法を理解しようとしています。

<div style="height: 50px; width:106px"> 
    <div style="border: 1px solid red; display: flex; position: relative"> 
    &nbsp; 
    <span style="border: 1px solid blue; height: 100px;">Child 1</span> 
    &nbsp; 
    <span style="border: 1px solid green; position: absolute; right: 3px">Child 2</span> 
    &nbsp; 
    </div> 
</div> 

これはJavaScriptをせずに行うことができますか？

Answer 1

絶対配置された要素にtop:0; bottom:0;を設定するだけで、親が相対的である限り、要素の上端と下端が親の上端と下端にロックされます。