How to keep div size independent of text size?

Question

I own a div which represents a square in which it aims to display a text to the user, see:

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

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: 0%;
    padding-bottom:30%;    
    margin: 0 auto;
}

.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>

However, if the text is too large, it makes the size of the div is amended. Therefore, I would like a help with the questions below.

Questions

1. How could I get the div to keep the original size independent of text size?
2. You can create a scroll in the div if the text is too large or have many lines?

Answer 1

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

How could I get the div to keep the original size independent of the text size?

What you can do is fix the size of the DIV, using own height, as you named the class .square I assume you want her as a square, so that would be 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 the height:, then to get around this use the box-sizing: border-box;, thus:

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

You can create a scroll in the div if the text is too large or has too many lines?

Just use overflow: auto which will apply both horizontal and vertical scroll if necessary, if you only want the vertical scroll overflow-y: auto, or if required horizontal overflow-x: auto, in your case I think you just want vertical:

.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 inside the selector html, body will have to add the height: 100%, thus:

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

Upshot:

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%; in the square will depend on the view-port, that is it is possible that it does not become a square, if you want a perfect square you either have to fix the width and height with pixel values, or use Javascript to update the height value according to the width (or vice versa)