javascript - DOM jQuery에서 입력을 추가 한 후 부트 스트랩 4 모달 스크롤이 작동하지 않음

부트 스트랩 4 모달을 사용하고 있으며 이와 같은 UI가 있습니다.

알다시피,질문레이블과질문 추가가 있으며질문 추가를 클릭하면 jQuery를 통해 새 입력 상자를 추가 할 수 있습니다 . 새 질문을 추가하는 방법은 다음과 같습니다.

$(document.body).on("click",".addSingle",function(){
       var appendX = '<div class="actionBtn"><div class="BtnIcon removeBtn removeSingle" title="Delete this choice."><svg class="svd-svg-icon" style="width: 16px; height: 16px;"><use xlink:href="#icon-inplaceplus"><symbol viewBox="0 0 12 12" id="icon-inplaceplus"><path d="M11 5H7V1H5v4H1v2h4v4h2V7h4z"></path></symbol></use></svg></div></div>';

       $(this).closest(".question_editable").find(".question:first").clone().find("input:text").val("").end().insertAfter($(this).closest(".question_editable").find(".question:last")).append(appendX);


   });

이제 문제는 더 많은 질문을 추가하자마자 스크롤을 볼 수 있지만 아래로 스크롤 할 수는 없다는 것입니다. 질문을 더 추가 할 때 UI가 어떻게 표시되는지 보여줍니다.

위에서 볼 수 있듯이 스크롤이 작동하지 않아서질문 추가텍스트를 더 이상 볼 수 없습니다.

이제질문 편집을 클릭하고질문 편집모달을 다시 열면 동일한 모달 코드 만있는 모달 ID 만있는 다른 파일 인 모달 ID가 다릅니다. 이것입니다.

여기질문 편집에서 질문을 추가 할 수 있으며 스크롤도 제대로 작동합니다. 그래서 내 비록 내질문 추가모달에 문제가 있지만질문 추가및질문 편집모달 질문 코드 구조에 대한 내 모달 팝업은 동일합니다.

여기의질문 추가모달 팝업과 같은 코드가 있습니다.

<div class="modal fade" id="questionModal" tabindex="-1" role="dialog" aria-labelledby="questionModal"
   aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modalcustom" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title">Add Question</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <form role="form" method="POST" action="" novalidate id="questionModalfrm">
            @csrf
            <div class="modal-body">
            </div>
            <div class="modal-footer">
               <button type="submit" class="btn btn-br-success  btn-s-md  waves-effect waves-light">Add</button>
               <button type="button" class="btn btn-danger  btn-s-md  waves-effect waves-light" data-dismiss="modal">Cancel</button>
            </div>
         </form>
      </div>
   </div>
</div>

다양한 옵션을 시도했습니다 ( 부트 스트랩 모달 문제-스크롤이 비활성화 됨 ) .modal { overflow-y:auto; } 를 추가하여  그러나 그것은 나를 위해 작동하지 않습니다.

여기에서 내질문 수정은 HTML 마크 업 모양입니다.

<div class="modal fade" id="questionModalEdit" tabindex="-1" role="dialog" aria-labelledby="questionModalEdit"
   aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modalcustom" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title">Edit Question</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <form role="form" method="POST" action="" novalidate id="questionModalEditfrm">
            @csrf
            <div class="modal-body">
            </div>
            <div class="modal-footer">
               <button type="submit" class="btn btn-br-success  btn-s-md  waves-effect waves-light">Save</button>
               <button type="button" class="btn btn-danger  btn-s-md  waves-effect waves-light" data-dismiss="modal">Cancel</button>
            </div>
         </form>
      </div>
   </div>
</div>

이 문제를 해결하기 위해 어떻게해야합니까?