Vertical scroll is not working in my app in angular 10 - html

Question

I have this template from angular 10. The problem is the scrollbar doesn´t work even if I add the css style on the main container overflow: auto;
The HTML and scss codes are as following, as you can see I include the overflow property to the main container "cont", but is not working:
Anyone can help with this? Thank you!
.cont{
overflow: auto;
}
<div class="cont">
<div class="card-body">
<form name="formEmpresa">
<div class="container-background">
<div class="container-fluid">
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<div class="input-group flex-nowrap">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping"><i class="fa fa-building"></i></span>
</div>
<input type="text" class="form-control" placeholder="J123456789" name="Rif" required>
</div>
</div>
<div class="col-sm-6"></div>
<div class="col-sm-12">
<hr style="border: none">
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping"><i class="fa fa-institution"></i></span>
<input type="text" class="form-control" placeholder="Razón Social" name="Razosoci" required ng-maxlength="150">
</div>
</div>
<div class="col-sm-12">
<hr style="border: none">
<label>Dirección fiscal</label>
<textarea class="form-control" rows="3" placeholder="Entre ..." name="Dir" ng-maxlength="200" required></textarea>
</div>
<div class="col-sm-12">
<hr style="border: none">
<div class="row justify-content-center">
<button class="btn btn-warning" style="width: 20%;">
<i class="fa fa-plus-circle" style="color: white;"></i> <h5 style="color: white;"><strong>Añadir sucursal</strong></h5>
</button>
</div>
</div>
<div class="col-sm-12">
<hr style="border: none">
<div class="card">
<div class="card-header" style="background-color: #ffc107; color: white;">
<strong>Nueva surcursal</strong>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-12">
<div class="input-group flex-nowrap">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping"><i class="fa fa-building"></i></span>
</div>
<input type="text" class="form-control" placeholder="Nombre Sucursal" name="sucursal" required>
</div>
</div>
<div class="col-sm-6">
<hr style="border: none">
<div class="input-group flex-nowrap">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping"><i class="fa fa-phone"></i></span>
</div>
<input type="text" class="form-control" placeholder="Teléfono" name="phone" required>
</div>
</div>
<div class="col-sm-6">
<hr style="border: none">
<div class="input-group flex-nowrap">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping"><i class="fa fa-qrcode"></i></span>
</div>
<input type="text" class="form-control" placeholder="Código Postal" name="postal_code" required>
</div>
</div>
<div class="col-sm-12">
<hr style="border: none">
<textarea class="form-control" rows="3" placeholder="Dirección" name="Dir" ng-maxlength="200" required></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>

Answer 1

You need to give some height to .cont class to add scroll to that div.