Polsterung auf Bootstrap 4 Flex-Container mit 100% Höhe

Question

Ich mache ein div, das fixiert werden muss, 100% Höhe und vertikal in der Mitte ausgerichtet. Und es muss mit Bootstrap 4 gemacht werden. Ich habe das alles geschafft, außer das Hinzufügen von Padding. Immer wenn ich dem Kind-Div ein Padding hinzufüge, wird der Inhalt außerhalb des Bildschirms angezeigt. Ich habe sogar versucht,

overflow-y: scroll 

der Hoffnung, es werde ihn beheben, aber es passiert nichts.

Da der Code abgeschnitten nicht alles zeigt, wie es hier sein sollte, hier ist a codepen link.

Kann mir bitte jemand meinen Code ansehen und mich wissen lassen, was ich falsch gemacht habe?

.card { 
 
    color: #fff; 
 
    background: tomato; 
 
    position: fixed; 
 
    min-height: 100%; 
 
    /* height: 100%; */ 
 
    width: 340px; 
 
    right: 0; 
 
    top: 0; 
 
    overflow: scroll; 
 
} 
 

 
.card-block { 
 
    padding: 100px; 
 
    margin: auto; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" /> 
 
<div class="card rounded-0 d-flex justify-content-center"> 
 

 
    <div class="card-block align-self-center"> 
 
    <h1>This is a title</h1> 
 
    <h5>This is a subtitle</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in laoreet neque. Praesent tincidunt justo a magna tempor vulputate. Phasellus euismod feugiat sem. Nam tempus nec nisl id viverra. Cras blandit erat mauris. Cras non commodo quam. Mauris 
 
     auctor ligula vitae erat mollis, quis convallis diam consequat. Nullam ac magna vitae lorem elementum vehicula nec rhoncus nisl. Nullam dignissim at nunc a congue. Sed fringilla pulvinar consequat. Curabitur interdum, nunc in finibus auctor, tortor 
 
     libero facilisis felis, id maximus nibh ex eu nunc. Nunc in molestie lorem, bibendum maximus ipsum. Vestibulum ac finibus risus.</p> 
 
    <a href="#" class="btn btn-secondary">This is a button</a> 
 
    </div> 
 
</div>

Answer 1

Fügen Sie einfach bottom:0 Ihrer Klasse card-block

Sie müssen die Eigenschaften nur card-block und nicht card

.card-block { 
    padding: 0px 40px; 
    margin: auto; 
    color: #fff; 
    background: tomato; 
    position: fixed; 
    width: 340px; 
    top: 0; 
    bottom:0; 
    right: 0; 
    overflow-y: scroll; 
} 

hinzufügen

Fühlen Sie sich frei zu ändern padding, margin und width. Da sie das Scrollen immer noch intakt halten.

prüfen diese CODEPEN