.blur
에 postion : absolute
가 있으므로 .wrapper
에 위치 상대
를 포함 / 추가해야합니다. 수업.
.wrapper {background-color: tomato;
border: 1px solid #dfe0e3;
border-radius: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin: calc(30px/ 2) auto;
min-height: calc(50vh - 30px);
height: auto;
font-size: 70px;
position: relative;
}
.blur {
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
background-color: #000000;
opacity: 0.3;
width: 100%;
position: absolute;
box-sizing: border-box;
z-index: 3;
border-radius: 20px;
height: 100%;
}
<div class="wrapper"><div class="blur"></div>fdskfjdksfjfjklsdjfkdls Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut minus error earum excepturi hic reiciendis officia libero molestias magni voluptas? Quidem aperiam perferendis consequuntur vero atque ipsum sed voluptate optio.</div>
출처 : https://stackoverflow.com/questions/63112567/overlay-background-does-not-fill-all-container-height