JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="modal fade" id="centralModalLg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog" [ngClass]="{ 'modal-lg': productDetails?.imageUrl != null, 'modal-md': productDetails?.imageUrl == null}" role="document">
        <!--Content-->
        <div class="modal-content" *ngIf="productDetails">
            <div class="modal-body">

                <div class="row">
                    <div class="col-md-12">
                        <button *ngIf="productDetails.imageUrl != null" type="button" id="closeProductModal" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>

                        <h4>{{productDetails?.productName}}
                            <span>
                              <img *ngIf="!productDetails?.isVeg" alt="trending" class="w24" src="https://www.crashmeal.com/assets/images/icons/trending-m.png">
                            </span>
                            <span>
                                     <img  *ngIf="productDetails?.isVeg" alt="veg" class="w24" src="https://www.crashmeal.com/assets/images/icons/veg-m.png">
                             </span>
                        </h4>
                        <div id="elementId" class="over-flow-md">
                            <img *ngIf="productDetails.imageUrl != null" class="card-img-top" src="{{baseLogoUrl + productDetails?.imageUrl}}" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;"...

CSS

.over-flow-md{ max-height: 355px; overflow: hidden; overflow-y: auto; margin-right: -10px; padding-right: 10px; }

JavaScript

$('#centralModalLg').on('show.bs.modal', function() {

    setTimeout(function() {
    var $elem = $('#scrollto') // add this ID to an element you want scroll to
    var $container = $("#elementId")
    $container.scrollTop(0) // edge case - reset scroll in case it is reopened
    var t = $container.offset().top
    console.log(t)
    $container.scrollTop($elem.position().top - t);
    }, 500) // run after modal animation 
});