Why does card overflow from parent col - css

Question

My Form elements are not fitting in correctly and the alignment is
distorted.
.h-100 has been used since the blue back ground is my navigation and I want it to fill the entire height available in the screen.
I would prefer to accept an answer which can explain why my snippet does not work.
Plunker here
HTML
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-2 blue">
</div>
<div class="col-10">
<div class="card h-100">
<div class="card-body">
<form>
<div class="form-group">
<label for="Random">Random 1</label>
<input type="text" class="form-control" id="random1" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 2</label>
<input type="text" class="form-control" id="random2" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 3</label>
<input type="text" class="form-control" id="random3" placeholder="Enter Random">
</div>
<div class="form-group">
<label for="Random">Random 4</label>
<input type="text" class="form-control" id="random4" aria-describedby="employeeCodeHelp" placeholder="Enter random random">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="isActive">
<label class="form-check-label" for="isActive">Is Active</label>
</div>
<div class="form-group">
<label for="Random">Random 5</label>
<input type="text" class="form-control" id="random5" placeholder="Enter Random Random">
</div>
<div class="form-group">
<label for="phoneNumber">Random 6</label>
<input type="number" class="form-control" id="random6" placeholder="Enter phone number">
</div>
<div class="form-group">
<label for="emailId">Email</label>
<input type="number" class="form-control" id="emailId" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
CSS
.blue {
background-color:blue;
}
html,body {
height: 100%;
}
Screen shot

Answer 1

remove .h-100 class from .container and from .row as its height should be auto instead of 100% , answer is as per what i understand , that your card is going out of your .col right?
if you want to give blue shape than here is the code :
<div class="row">
<div class="col-2 blue">
</div>
<div class="col-10">
<div class="card h-100">
<div class="card-body">
<form>
<div class="form-group">
<label for="Random">Random 1</label>
<input type="text" class="form-control" id="random1" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 2</label>
<input type="text" class="form-control" id="random2" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 3</label>
<input type="text" class="form-control" id="random3" placeholder="Enter Random">
</div>
<div class="form-group">
<label for="Random">Random 4</label>
<input type="text" class="form-control" id="random4" aria-describedby="employeeCodeHelp" placeholder="Enter random random">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="isActive">
<label class="form-check-label" for="isActive">Is Active</label>
</div>
<div class="form-group">
<label for="Random">Random 5</label>
<input type="text" class="form-control" id="random5" placeholder="Enter Random Random">
</div>
<div class="form-group">
<label for="phoneNumber">Random 6</label>
<input type="number" class="form-control" id="random6" placeholder="Enter phone number">
</div>
<div class="form-group">
<label for="emailId">Email</label>
<input type="number" class="form-control" id="emailId" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
.blue{
min-height: 100px //the height you want to give
}