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

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>

question from:https://stackoverflow.com/questions/65905847/vertical-scroll-is-not-working-in-my-app-in-angular-10

Answer 1

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