title: How can I avoid my overflow text disappears in DIV height
body: <p>I'm practicing flexbox and tried to build a simple dialog box with some text inside a div. Ok..</p>
  
  <p>Everything was going on troubleless.. But when I put some example text inside my message div, it starts to seem smaller than the overflowed text.</p>
  
  <p>I tried to set some adjusts.. But nothing seems to work...</p>
  
  <pre><code>#areaMsg {
      width:86%;
      float:right;
      height:100%;
      display:flex;
      justify-content: flex-start;
      align-items: center;
      overflow:auto;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      background:yellow;
  }
  </code></pre>
  
  <p>Look whats going on here:</p>
  
  <p><a href="https://jsfiddle.net/rj27p2rd/" rel="nofollow">LINK IN FIDDLE</a></p>
  
  <p><a href="https://jsfiddle.net/rj27p2rd/" rel="nofollow">https://jsfiddle.net/rj27p2rd/</a></p>
  
  <p>P.s: Note that lines 1, 2 and 3 is completely hidden.. And line 4 is truncated.</p>