I encountered a scroll-x issue in CSS
Here is the HTML code snippet:
<div id=main_user_chat_tab_div class="chat-container_div" style="border:4px solid #F00;">
<div id="chat_box_win" class="chat_box_win" style="position:relative;"></div>
<div id="chat_user_rec" style="width:100%; height:20%; border:3px solid #333;overflow-y:hidden;overflow-x:scroll; display:table-row; position:relative;">
<div id="user_chat_image"></div>
<div id="user_chat_image"></div>
<div id="user_chat_image"></div>
<div id="user_chat_image"></div>
<div id="user_chat_image"></div>
<div id="user_chat_image"></div>
</div>
</div>
CSS code:
.chat-container_div {
width: 20.2%;
height:72%;
margin-right:15%;
margin-top:11%;
float:right;
position:relative;
display:none;
}
#user_chat_image {
position:relative;
display:inline;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
bottom:0px;
float:right; margin-right:2%; width:60px; height:60px; display:block;
}
I am trying to achieve a scroll-x functionality when the outer div chat_user_rec is full. However, it is not working as expected; overflow divs are appearing on the next row. Any insights on what might be causing this issue?