Logic card height using card_06n5The _06n500 CSS and HTML code are local

Cardstart: section class=wrap_06n500

contain_06n500 card_06n500
1. The card only works if the height is set in solid values:
contain_06n500, height:6vw


contain_06n501 height:30% notOK
2. It doesn't works if the height is set in percentage values, height:30%


contain_06n501 height:30% notOK. Only text grows the box.
3. This is if this extra text content is added inside the contain_06n501 container. The added text then expands the vertical dimension to fit inside it and the image displays above the added text. Something "solid" needs to define the height from the inside and not in relative terms to the previous container (wrap_06n500).
3. This is if this extra text content is added inside the contain_06n501 container. The added text then expands the vertical dimension to fit inside it and the image displays above the added text. Something "solid" needs to define the height from the inside and not in relative terms to the previous container (wrap_06n500).


THE SHORTCODE VERSION DOCUMENTING THE CSS FOR THE THREE CLASSES: sc name=”card_06n5″
Cardstart: section class=wrap_06n5
wrap_06n5 {padding:0 5px 7px; border:2px dotted red; margin:0 0.4vw 0.4vw 0; height:max-content; overflow:hidden;}  
@media (min-width:1025px) {.wrap_06n5 {background:rgba(240,240,252,1);}}

contain_06n5 card_06n5
.contain_06n5 {float:left; position:relative; top:0; left:0; width:50%; background:rgba(0,200,230,0.3); border:2px dashed dodgerblue;}
@media (min-width:1025px) {.contain_06n5 {height:12vw;}}

.card_06n5 {position:absolute; width:100%; height:100%; box-shadow:0px 7px 10px rgba(0,0,0,0.5); border:0px dashed red; border-radius:10px;}