Make display:flex responsive while retaining alignment - html

Question

Hello fellow stackers.
I have used display:flex on a div which sits in the middle of the Y and X div, as you can see here. However I want to make it responsive, which it NEARLY is! When I resize the browser wide down to around 250 pixels the div and the text within the div just stops responding.
Now I understand that if I remove display:flex it will allow the text to continue responding. However, when I do so the alignment drops to the bottom of the div. The misalignment doesn't display when I remove display:flex though which leads me to believe that there is something in my code which relies on display:flex to retain the alignment. You can view the website here. Please find the code below, and the Jsfiddle in the link above. Much obliged.
#registry {
background-color:#fff;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
}
.pane {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
min-height:50vh;
padding:6rem 1.5em;
position:relative;
width:100%
}
.pane .pane-title, .pane .title-section {
margin-bottom:2em;
}
.pane-title h2{
font-family: 'Abril Fatface', cursive;
text-transform: uppercase;
font-size: 1.875em;
}
#media (max-width:222px){
.pane-title h2{
font-size:1.3em;
}
}
.pane .pane-content {
max-width:68em;
margin-left:auto;
margin-right:auto
}
.pane .pane-content::after {
clear:both;
display:table
}
.pane .pane-row {
display:block;
margin-bottom:3em
}
.pane .pane-row::after {
clear:both;
display:table
}
.pane.flex {
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
flex:1;
flex-direction: column
-ms-flex-line-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center
}
.pane.flex .pane-content {
-webkit-align-self:center;
-ms-flex-item-align:center;
align-self:center
}
#registry {
background-image:url(http://kadeem.london/Content/Image/KL.png);background-color:#e94378;
-webkit-background-size:cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
min-height:110vh
}
#registry .pane-content {
max-width:48em;
background-color:#fff;
padding:6em 2em
}
#media screen and (min-width:768px) {
#registry .registry-description {
float:left;
display:block;
margin-right:2.12766%;
text-decoration: none;
width:65.95745%;
margin-left:17.02128%
}
#registry .registry-description:last-child {
margin-right:0
}
#registry p {
text-align:center
}
}
.registry-description p a{
text-decoration: none;
border-bottom: 1px solid #000;
color: #000;
}
.registry-description p a:hover{
text-decoration: none;
background-color: #000;
color: #fff;
}
<section id="registry" class="pane flex">
<div class="pane-content">
<div class="pane-title">
<h2>Get In Touch</h2>
<span class="underline"></span>
</div>
<div class="registry-description">
<p>I hope your liking my website so far. If you would like to work with me you can give me a call or message me on the email below. Alternatively you can view more of my articles, designs, and projects.
</p>
<br>
<button class="connn"><a>contact#kadeem.london</a>
</button>
</div>
</div>
</section>

Answer 1

Your contact button (contact#kadeem.london) is what is stopping the content from resizing down any further.
However, having said that, you probably don't need to worry about supporting devices that narrow - all devices I'm aware of are at least 480px wide in portrait orientation.