scroll-bug

HTML

<div class='container3'>
  <div class='container'>
    <div class='container2'>
      <ul class='messages'>
        <li><pre>Hello</pre></li>
        <li class='reply'>
          <pre>This is a 
        really really really 
        really really long message.</pre>
        </li>
        <li><pre>World</pre></li>
      </ul>
    </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.container3 {
  height: 200px;
  overflow-y: auto; /* should be scroll */
}

.container {
  background: #f0f;
  box-sizing: border-box;
  width: 250px;
  height: 200px;
  padding: 10px;
}

.container2 {
  background: #ff0;
  box-sizing: border-box;
  width: 200px;
  overflow: visible;
  padding: 10px;
}

.messages {
  position: relative;
  box-sizing: border-box;
  padding: 4px;
  overflow: visible;
  list-style: none;
}

.messages li {
  width: calc(100% - 20px);
  height: 100%;
  margin: 16px 16px 4px 4px;
}

.messages li.reply {
  margin-left: 16px;
  margin-right: 4px;
}

.messages li pre {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 4px;
  background: #0ff;
  border-radius: 4px;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: auto;
  min-width: 100%;
  max-width: 100%;
  transition: max-width 200ms ease-out;
  height: auto;
}

.messages li pre:hover {
  position: relative;
  z-index: 1;
  background: #00f;
  max-width: 80vw;
  transition: max-width 200ms ease-in;
}