DIV elements have no original size, other than the size that accompanies the content or size you set via css with the height: property

  

How can I make the div keep the original size independent of the size of the text?

What you can do is set the size of the DIV, using the height itself, as you named the class .square I assume you want it as a square, so it would look like the CSS:

.square {   
    border: solid 5px #f0f;
    width: 50%;
    height: 50%;
    padding-bottom:30%;
    margin: 0 auto;
}

However, the padding-bottom:30%; will be adding to height: , so to get around this use box-sizing: border-box; , like this:

.square {   
    border: solid 5px #f0f;
    width: 50%;
    height: 50%;
    padding-bottom:30%;
    margin: 0 auto;
    box-sizing: border-box;
}

  

Is it possible to create a scroll in the div if the text is too large or has many lines?

Just use overflow: auto that will apply both horizontal and vertical scroll if necessary, if you only want the vertical scroll overflow-y: auto , or if you need horizontal overflow-x: auto , in your case I believe you only want vertical: p>

.square {   
    border: solid 5px #f0f;
    width: 50%;
    height: 50%;
    padding-bottom:30%;
    margin: 0 auto;
    overflow-y: auto;
    box-sizing: border-box;
}

  

Note: Depending on the DOCTYPE within the html, body selector you will have to add height: 100% , like this:

html, body {
    background-color: #323232;
    height: 100%;
}

Result:

html, body {
    background-color: #323232;
    height: 100%;
}

html {
   font-family: 'helvetica neue', 'arial', sans-serif;
   font-size: 24px;
   font-weight: bold;
   padding-top: 5em;
   -webkit-font-smoothing: antialiased;
   text-align: center;
   background: #323232;
}

.square {
    border: solid 5px #f0f;
    width: 50%;
    height: 50%;
    padding-bottom:30%;
    margin: 0 auto;
    overflow-y: auto;
    box-sizing: border-box;
}

.square p {
    color: #fff;
    font-size: 20px;
    text-align: justify;
    position: relative;
    padding-left: 2%;
    padding-right: 2%;
}

<div class="square">									
  <p>“The police are across the street.”</p>

  <p>Cal stood in front of the bathroom mirror, face covered in white shaving cream and an orange razor in one hand. The room was full of warm steam from the long shower he’d taken, but after his wife’s statement he’d gone cold.´</p>

  <p>She knocked on the door again. “Did you hear what I said?”</p>

  <p>“At the Daniels’ house?”</p>

  <p>“Yes,” she said, “and there are a lot of them.”</p>

  <p>In other words, hurry up.</p>

  <p>He thought of the black notebook he kept in the bottom drawer of his desk, the Journal of Dead Animals. Cal was trembling.</p>
</div>

Extra

Of course, width: 50%; and height: 50%; and square will depend on view-port , ie it is possible that there is no square, if you want a perfect square you have to either width or height with values in pixels, or use JavaScript to update the width height value (or vice versa)