How to prevent a div from leaving the page, when another div changes size?

Question

My page has basically two divs, to the right and to the left, the two are with style="position: fixed;", that is, if I roll the page, those two divs are side by side, fixed, always visible.

But when the div from the left receives text, it changes its size gets wider. It "pushes" the div from the right even further to the right and consequently out of the browser window. Therefore, a portion of its contents can no longer be viewed.

How to make the div the right has its right edge less than the browser window limit, such as making this div get thinner and more "thin", preventing her to "leak" to screen shoot?

Answer 1

Hello, Roberval!

Use the box-Sizing beam the sizes with the percentage desired.
See the tips in CSS Tricks

I put in the Jsfiddle p/ you can test as well!
Jsfiddle | https://jsfiddle.net/romulobastos/awnonopr/

---

Follows the code:

* { margin: 0; padding: 0; font-family: arial, helvetica, sans-serif; }
    h1 { font-size: 21px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.2); }
    #container {
      position: fixed;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    #divEsquerda, #divDireita {
      position: fixed;
    	height: 100%;
      top: 0;
      bottom: 0;
      padding: 2%;
      color: #fff;
      overflow: auto;
      -webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;  
    }
    #divEsquerda{ width: 30%; background: #246; left: 0; }
    #divDireita { width: 70%; background: #369; right: 0; }

<div id="container">
      <!-- esquerda -->
      <div id="divEsquerda">
        <h1>Conteúdo da Esquerda</h1>
        <p>...</p>
      </div>
      
      <!-- direita -->
      <div id="divDireita">
        <h1>Conteúdo da Direita</h1>
        <p>...</p>    
      </div>
    </div>

Hug!