如何自动滚动显示：表溢出时？

Question

如果display:table出现溢出，如何显示滚动条？

示例代码：

https://jsfiddle.net/mvnvnk5z/

HTML：

<div class="chatpanel">
<div id="chatcontent">
    <p class="userchat">hello</p>
     <p class="userchat">hello2</p>
     <p class="userchat">hello3</p>
     <p class="userchat">hello4</p>
     <p class="userchat">hello5</p>
     <p class="userchat">hello6</p>
     <p class="userchat">hello7</p>
     <p class="userchat">hello8</p>

    </div>    
</div>

的CSS：

.chatpanel{
    display:table;
    table-layout:fixed;
    overflow-x:hidden;
    overflow-y:auto;
    height:50px;
    width:50px;

}
#chatcontent {
    display:table-cell;

}

感谢

Answer 1

如果您希望在 y轴中滚动溢出的内容，请将overflow-y:auto;更改为overflow-y:scroll;，您可以按照 x的相同模式-axis ，这是示例代码; Scroll

Answer 2

使用此代码检查here

 <div class="chatpanel">
      <div id="chatcontent" style="overflow-y:auto;height:100px;">
                <p class="userchat">hello</p>
                <p class="userchat">hello2</p>
                <p class="userchat">hello3</p>
                <p class="userchat">hello4</p>
                <p class="userchat">hello5</p>
                <p class="userchat">hello6</p>
                <p class="userchat">hello7</p>
                <p class="userchat">hello8</p>

       </div>    
 </div>

  

享受...！