Having a card with a form in it, I wanted to implement a y-scroll bar to control the visibility of the form on the page. However, it seems that the columns are extending beyond the boundaries of the card.
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
padding: 10px;
background-color: white;
border-radius: 1%;
width: 115%;
margin-left: -9%;
max-height: 42%;
}
.column {
float: left;
background-color: white;
margin-left: -15%;
margin-right: 175%;
margin-top: -5%;
}
.column2 {
float: left;
background-color: white;
margin-left: -200%;
margin-right: -1%;
margin-top: -8%;
width: 100%;
border-left: 1px solid #E1E0E5
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.scroll-box {
overflow-y: scroll;
height: 40%;
padding: 1rem;
}<div class="card">
<div class="row">
<div class="column"></div>
<div class="column2">
<div class="scroll-box">
<form #f="ngForm" novalidate>
<!-- steps of the form -->
<button type="submit" (click)="save(f.value, f.valid)">Submit</button>
</form>
</div>
</div>
</div>
</div>How can I make sure that the columns stay within the card's height and do not overflow out of it?
Currently, the display looks like this: