title: Can I get content to overlap scroll bar? CSS
body: <p>I have a situation where the 'bar' div, display some information about the 'foo' element, when the 'foo' element is hovered. But the scroll bar conflict with that, and hide the rest of my div. Can I get it to display the full 'bar' div somehow?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="box"&gt;
      &lt;div class="foo"&gt;
          xxx
          &lt;div class="bar"&gt;Info text, info text&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.box {
      height: 80px;
      width: 80px;
      background: blue;
      position: absolute;
      overflow-y: scroll;
      overflow-x: hidden;
  }
  .foo {
      float: left;
      background: red;
      height: 50px;
      width: 50px;
      position: relative;
  }
  .bar {
      float: left;
      height: 20px;
      width: 125px;
      background: orange;
      position: relative;
      top: -10px;
      right: -30px;
      display: none;
  }
  .foo:hover &gt; .bar {
      display: block;
  }
  </code></pre>