.popup {
position: fixed;
z-index: 200;
top: 0;
left: 0px;
width: 100%;
height: 100%;
transform: translateX(-100%);
overflow-y: auto;
overflow-x: hidden;
background-color: #fff;
display: flex;
justify-content: center;
transition: transform .25s ease-in-out;
}
.popup__inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 520px;
width: 100%;
position: relative;
z-index: 2;
margin: 0 auto;
overflow-x: hidden;
overflow-y: auto;
padding: 40px 65px;
background-color: #051367;
}
.popup--active {
transform: translateX(0);
}
.popup__title {
font-size: 48px;
line-height: 1.2;
color: #fff;
text-align: center;
text-transform: uppercase;
margin-bottom: 60px;
font-weight: 900;
}
.popup__close {
position: absolute;
top: 30px;
right: 30px;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 1;
border: none;
outline: none;
background-color: transparent;
}
.popup__close:after,
.popup__close:before {
content: '';
position: absolute;
top: 13px;
left: 3px;
width: 30px;
height: 3px;
background-color: #fff;
}
.popup__close:after {
transform: rotate(45deg);
}
.popup__close:before {
transform: rotate(-45deg);
}
<section class="popup popup--active">
<div class="popup__inner">
<button class="popup__close"></button>
<p class="popup__title">drhrdjd?</p>
<form action="" class="contacts__holder">
<div class="contacts__box">
<input type="text" class="input" placeholder="drjdr">
</div>
<div class="contacts__box">
<input type="text" class="input" placeholder="drjdr">
</div>
<div class="contacts__box">
<textarea class="area" placeholder="drjrd"></textarea>
</div>
<div class="contacts__box">
<input type="text" class="input" placeholder="drjdr">
</div>
<div class="contacts__box">
<input type="text" class="input" placeholder="drjdr">
</div>
<div class="contacts__box">
<textarea class="area" placeholder="drjrd"></textarea>
</div>
<div class="contacts__box">
<input type="text" class="input" placeholder="drjdr">
</div>
<div class="contacts__box">
<input type="text" class="input" placeholder="drjdr">
</div>
<div class="contacts__box">
<textarea class="area" placeholder="drjrd"></textarea>
</div>
<button class="btn">drjdrj</button>
</form>
</div>
</section>
на мельньких экранах обрезается попап. Из-за флекса .popup__inner Но убрать его там не могу. Нужно выровнять по центру блок.