Div 오버레이 div와 동일한 크기

Question

도와 주실 수 있습니다. 버튼 역할을하는 div가 있습니다. 클릭하면 클릭 된 div 바로 위에 오버레이가 표시됩니다. 이 오버레이는 녹색 테두리와 체크 표시가 있습니다. 이제 div가 한 행 높이에있을 때 마크 업이 올바르게 작동합니다. 텍스트의 길이가 증가하면 오버레이 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

두 가지 단순화하고 문제를 해결할 : 크기 상자와 절대 위치를.

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>