Text running out the bottom of popup window

Question

I am trying to create a popup that is centered on the screen both horizontally and vertically, with a maximum width is 60% of the window width, and the maximum height is 60% of the window height. When I resize the window the text runs out the bottom of the popup though. Is there a way to contain the text and keep it proportional to the popup window size?

 
	    $(function() {
    	//----- OPEN
	    $('[data-popup-open]').on('click', function(e) {
		    var targeted_popup_class = jQuery(this).attr('data-popup-open');
		    $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);

		    e.preventDefault();
	    });

	    //----- CLOSE
	    $('[data-popup-close]').on('click', function(e) {
		    var targeted_popup_class = jQuery(this).attr('data-popup-close');
		    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

		    e.preventDefault();
	    });
    });
		

		

    .popup {
	max-width:60%;
	max-height:60%;
	display:none;
  	position: fixed;
 	top: 50%;
 	left: 50%;
    }


    .popup-inner {
	max-width:60%;
	max-height:60%;
	/* padding:40px; */
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	box-shadow:0px 2px 6px rgba(0,0,0,1);
	border-radius:3px;
	color: orange;
	font-size: 4vh;
	background: rgba(0, 0, 0, 0.8);  
	border: 3px solid orange;
	border-radius: 10px;
	border-color: orange;

    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="popup" data-popup="popup-1">
	
      <div class="popup-inner"> 
        <p>
		<table>
			<tr>
				<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
			</tr>	
				<tr><td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
			</tr>
			<tr>
				<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
			</tr>
	  	</table>
	</p>
    <!-- <p><a data-popup-close="popup-1" href="#">Close</a></p> -->
   <a class="popup-close" data-popup-close="popup-1" href="#"></a> 
  </div>
</div>

Answer 1

How about this?

Have .popup to work as a container so it should have the border, background and shadow instead of having those on .popup-inner.

How .popup is getting centered is having the element's top edge 20% away from top of the window, bottom edge 20% away from bottom of the window, left edge & right edge 20% from left & right edge of the window respectively.

Adding all these up makes 40% vertical space and 40% horizontal space which will achieve your 60% of width and height.

How the text is being contained within .popup here is by using overflow.

.popup's overflow: hidden means that anything outside of .popup will always be hidden.

While .popup-inner's overflow: auto will enable scrolling when the content exceeds the element's area and if all content is within the element, no scrolling will be made available.

$(function() {
  //----- OPEN
  $('[data-popup-open]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-open');
    $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);

    e.preventDefault();
  });

  //----- CLOSE
  $('[data-popup-close]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

    e.preventDefault();
  });
});

.popup {
  display: block;
  position: fixed;
  left: 20%;
  right: 20%;
  top: 20%;
  bottom: 20%;
  box-shadow:0px 2px 6px rgba(0,0,0,1);
  border-radius:3px;
  color: orange;
  border: 3px solid orange;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.8);
  font-size: 4vh;
  overflow: hidden;
}

.popup-inner {
  position: absolute;
  width: 96%;
  height: 96%;
  padding: 2%;
  overflow: auto;
}

.popup-close {
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="popup" data-popup="popup-1">
  <div class="popup-inner"> 
    <p>
      <table>
        <tr>
          <td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
        </tr>	
        <tr>
          <td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
        </tr>
        <tr>
          <td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
        </tr>
      </table>
    </p>
    <!-- <p><a data-popup-close="popup-1" href="#">Close</a></p> -->
    <a class="popup-close" data-popup-close="popup-1" href="#">Close</a> 
  </div>
</div>