 <p>Doing what Francisco Presencia said with a div wrapping the text works.. </p> <p>new css:</p> <pre><code>#notestext { width: 500px; height: 200px; overflow-y:scroll; } #notesdisplay { position: relative; background: #E8E8E8 ; border: 3px solid #000000; display: box; max-width: 500px; max-height: 200px; padding: 25px; } #notesdisplay:after, #notesdisplay:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } #notesdisplay:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #E8E8E8; border-width: 10px; left: 50%; margin-left: -10px; } #notesdisplay:before { border-color: rgba(21, 83, 132, 0); border-bottom-color: #000000; border-width: 14px; left: 50%; margin-left: -14px; } </code></pre> <p>new html:</p> <pre><code>&lt;div id="notesdisplay"&gt;&lt;div id="notestext"&gt;TEXT&lt;/div&gt;&lt;/div&gt; </code></pre>