title: Main vertical scroll affects the scroll in a fixed div
body: <p>I need a basic container with overflow-y and fixed to the bottom of the page.<br />
  My problem was that the main scroll of the page affected the containers scroll.<br />
  When the main scroll is at the top the chat scroll works fine, but when it is down at the bottom the chat scroll isn't working correctly.</p>
  
  <p>Where is the error in my code?</p>
  
  <pre><code>&lt;style&gt;
  .floatChat{
      position: fixed;
      bottom: 30px;
      left: 95px;
      z-index: 1001;      
      height: 250px;           
      font-size: 12px;    
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;}
  &lt;/style&gt;
  
  &lt;div id="chatPanel"&gt; &lt;div class="floatChat"&gt;
           &lt;div id="chat" class="col-md-3"&gt;
              &lt;div class="panel panel-primary" style="width:250px;"&gt;
              &lt;div class="panel-heading" style="height:30px; font-size:12px; border-color:#069;"&gt;
                  &lt;div class="panel-actions" style="height:30px;"&gt;
                      &lt;div class="btn-group"&gt;                                          
                      &lt;i class="fa fa-pencil btn" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Practise"&gt;&lt;/i&gt;
                      &lt;i class="fa fa-times btn" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Close" onclick="removeChatBox(index);"&gt;&lt;/i&gt;
                      &lt;/div&gt;                                                         
                  &lt;/div&gt;
                  &lt;div class="text-bold"&gt;&lt;i class="fa fa-comments"&gt;&lt;/i&gt; friendName &lt;/div&gt;                                               
              &lt;/div&gt;
              &lt;div class="panel-body bg-inverse" style="height:210px;"&gt;
                  &lt;div style="height:190px; width:230px;"&gt;
                      &lt;div id="mesContainer" style="overflow-x:hidden; overflow-y:auto; height:170px; word-wrap: break-word;"&gt;                                            
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="panel-footer" style="padding:0px;"&gt;
                  &lt;div class="input-group input-group-in"&gt;
                      &lt;input id="mes" type="text" class="form-control input-sm"&gt;
                      &lt;span class="input-group-btn"&gt;
                          &lt;button id="send" class="btn btn-primary" type="button" onclick="sendChatMessage(friendId)";&gt;&lt;i class="fa fa-share text-midnight"&gt;&lt;/i&gt;&lt;/button&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;                 
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p><code>MesContainer</code> is the container of the message.</p>