Html 长文本在Div中重叠？

我有一个div-box，我想在最小高度：33px；当大于该高度时，使用“换行”来增加高度。这把小提琴真管用！是否有任何原因使其仅在高度为33px的情况下局部执行此操作：

&（小提琴风格）

---

正如@ChristianVarga指出的：“在本地副本的任何地方都有行高：0吗？”

---

继承的行高：0；是干扰风格。

演示产生了一个良好的结果，没有任何重叠。在哪个浏览器上获得此输出？@KingKing是正确的，但可能是什么导致了这些屏幕截图？您的本地副本上有

行高：0

吗？将我们链接到工作副本并不能真正帮助我们解决问题…@captainsac on safari、chrome和firefox！

<div class="outerDiv">
    <div class="messages">
        <div class="topMessage">
            new message that is really long and should be on multiple lines as this continues on to the next line and so on and so forth
        </div>
    </div>
    <div class="comments">
        <div class="comment">Here's a comment</div>
    </div>
</div>

.outerDiv {
  width: 260px;
}
.messages {
  float: left;
  min-width: 100%;
  max-width: 100%;
  min-height: 33px;
  border: 1px solid #999;
  display: table;
  padding: 1%;
  font-size: 12.9px;
}
.topMessage {
  display: table-cell;
  vertical-align: middle;
  padding-left: 2%;
  font-size: 12.9px;
}
.comments {
  float: left;
  min-width: 100%;
  max-width: 100%;
  height: 33px;
  border: 1px solid #000;
  padding: 1%;
  display: table;
}
.comment {
  display: table-cell;
  vertical-align: middle;
  padding-left: 2%;
  padding-right: 2%;
  font-size: 12.9px;
}