JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<button data-toggle="modal" data-target="#notification_modal" class="btn">
  Click for modal
</button>


<div class="modal fade" id="notification_modal" role="dialog" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header text-center modal_header_bg">
        Notifications
      </div>
      <div class="modal-body">
        <h1> Test </h1>
        <h1> Test </h1>
        <h1> Test </h1>
        <h1> Test </h1>
        <h1> Test </h1>
        <h1> Test </h1>
        <h1> Test </h1>
        <h1> Test </h1>
        <h1> Test </h1>
        <h1> Test </h1>
        <h1> Test </h1>
      </div>
      <div class="modal-footer">
        <div class="btn btn-primary" data-dismiss="modal">
          Close
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.modal-dialog,
.modal-content
{
  height: 90%;
}
.modal-body
{
   max-height: calc(100% - 10px);
   overflow-y: scroll;
}