Divオーバーレイとdivと同じサイズ

Question

あなたが助けてくれることを願っています。私はボタンとして機能するdivを持っています。クリックすると、クリックされたdivの上にオーバーレイが正確に表示されます。このオーバーレイには緑色の枠線とチェックマークが付きます。 divが1行の高さにすぎない場合、マークアップはうまく動作します。テキストの長さが増えると、オーバーレイのdivは下のdivよりも短く表示されます。オーバーレイをダイナミックな方法でボトムdivと同じサイズにする方法はありますか？つまり、テキストの長さに依存しますか？希望は意味をなさない。

.text-btn-bg { 
 
    background:#2ecc71; 
 
    height:100%; 
 
    width:100%; 
 
    margin:0 auto; 
 
    padding:0; 
 
} 
 
.text-btn { 
 
    display:flex; 
 
    height:100%; 
 
    color:#fff; 
 
    margin:0; 
 
    padding:0; 
 
    cursor:pointer; 
 
    border:6px solid #3498db; 
 
    -webkit-transition:-webkit-transform .07s ease-out; 
 
    -moz-transition:-moz-transform .07s ease-out; 
 
    -o-transition:-o-transform .07s ease-out; 
 
    transition:transform .07s ease-out; 
 
} 
 
.text-btn.txt-btn1, .text-btn.txt-btn2, .text-btn.txt-btn3, .text-btn.txt-btn4, .text-btn.txt-btn5, .text-btn.txt-btn6 { 
 
    background-color:#fff; 
 
    color:#3498db; 
 
} 
 
h5.h5-text-btn { 
 
    vertical-align:middle; 
 
    display:table-cell; 
 
    padding:10px 30px; 
 
    margin:auto; 
 
    font-weight:600; 
 
} 
 
.text-btn.ico-btn-check-overlay { 
 
    background-color: rgba(255, 255, 255, .8); 
 
    border-color: #1abc9c; 
 
    height:73px; 
 
margin-top: -50px; 
 
}

<div class="text-btn-bg"> 
 
       <div class="text-btn txt-btn1"> 
 
        <h5 class="h5-text-btn">The quick brown fox jumps over the chickens and then runs off into the distance where he bumps into a badger.</h5> 
 
       </div> 
 
       
 
       <div class="text-btn txt-btn1 ico-btn-check-overlay option-choice-check-overlay" style="display: flex;"> 
 
        <span class="icon-checkmark text-checkmark"></span> 
 
       </div> 
 
      
 
      </div>

Answer 1

2つのことを簡素化し、あなたの問題を解決する：サイズボックスと絶対配置を。

Fiddle

* { 
 
    box-sizing: border-box; /* include padding and borders in size */ 
 
} 
 
.text-btn-bg { 
 
    position: relative; /* needed for child positioning */ 
 
    background: #2ecc71; 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 

 
.text-btn { 
 
    display: flex; 
 
    height: 100%; 
 
    color: #fff; 
 
    margin: 0; 
 
    padding: 0; 
 
    cursor: pointer; 
 
    border: 6px solid #3498db; 
 
    -webkit-transition: -webkit-transform .07s ease-out; 
 
    -moz-transition: -moz-transform .07s ease-out; 
 
    -o-transition: -o-transform .07s ease-out; 
 
    transition: transform .07s ease-out; 
 
} 
 

 
.text-btn.txt-btn1, 
 
.text-btn.txt-btn2, 
 
.text-btn.txt-btn3, 
 
.text-btn.txt-btn4, 
 
.text-btn.txt-btn5, 
 
.text-btn.txt-btn6 { 
 
    background-color: #fff; 
 
    color: #3498db; 
 
} 
 

 
h5.h5-text-btn { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
    padding: 10px 30px; 
 
    margin: auto; 
 
    font-weight: 600; 
 
} 
 

 
.text-btn.ico-btn-check-overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: rgba(255, 255, 255, .8); 
 
    border-color: #1abc9c; 
 
}

<div class="text-btn-bg"> 
 
    <div class="text-btn txt-btn1"> 
 
     <h5 class="h5-text-btn">The quick brown fox jumps over the chickens and then runs off into the distance where he bumps into a badger. The quick brown fox jumps over the chickens and then runs off into the distance where he bumps into a badger. The quick brown fox jumps over the chickens and then runs off into the distance where he bumps into a badger.</h5> 
 
    </div> 
 

 
    <div class="text-btn txt-btn1 ico-btn-check-overlay option-choice-check-overlay" style="display: flex;"> 
 
     <span class="icon-checkmark text-checkmark"></span> 
 
    </div> 
 
</div>