<!DOCTYPE html>
<html>
<link rel="match" href="reference/overflow-hidden-6-ref.html" />
<style>
.display-flex-position-relative {
display: flex;
flex-direction: column;
position: relative;
}
.display-block {
display: block
}
.overflow-hidden {
overflow: hidden
}
.width-1050px {
width: 100px
}
.width-100-percent {
width: 100%
}
.left-0px {
left: 0px
}
.bottom-0px {
bottom: 0px
}
.height-100-percent {
height: 100%
}
.top-50-percent {
top: 50%
}
.left-50-percent {
left: 50%
}
.transform-50-percent {
transform: translateX(-50%) translateY(-50%);
}
.position-absolute {
position: absolute
}
.height-auto {
height: auto
}
.padding-bottom-100-percent {
padding-bottom: 100%;
}
</style>
<div class="display-flex-position-relative width-1050px">
<div class="width-100-percent padding-bottom-100-percent"></div>
<div class="position-absolute width-100-percent height-100-percent">
<div
class="height-100-percent width-100-percent position-absolute left-50-percent top-50-percent transform-50-percent">
<div
class="overflow-hidden position-absolute left-50-percent top-50-percent transform-50-percent width-100-percent height-100-percent ">
<div class="display-block width-100-percent padding-bottom-100-percent"></div>
<div class="bottom-0px left-0px position-absolute top-0px width-100-percent height-100-percent "
style="background-color: green;"></div>
</div>
</div>
</div>
</div>
