固定定位div内容溢出且div横向排列的布局问题如何解决？

问题根因 #

• 核心错误是你错误地给所有消息外层都添加了.pbcb类，而.pbcb设置了position: fixed固定定位，多个固定定位元素会脱离文档流，自然不会按正常流垂直排列，还会互相重叠导致内容溢出
• 代码结构存在嵌套错误，不需要在每条消息外层重复嵌套.pbcb容器，全局仅需1个最外层的固定定位滚动容器即可
• 多余开启了水平滚动overflow-x: scroll，也会导致内容横向溢出出现多余滚动条

修正方案 #

1. 删除所有消息外层多余的.pbcb类和对应的嵌套div，仅保留最外层的一个.pbcb容器
2. 给.pbcb设置overflow-x: hidden关闭水平滚动，避免横向内容溢出
3. 调整内部消息的布局结构，所有消息直接放在.sub容器内即可

修正后完整代码 #

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<style type="text/css">
.mright{
  white-space: normal;
  word-wrap: break-word;
  text-align: justify;
  text-justify: inter-word;
 }

 .mleft{
  white-space: normal;
  word-wrap: break-word;
  text-align: justify;
  text-justify: inter-word;
 }

.pbcb{
  position:fixed;
  background-color: #ECF0F1;
  left:0%;
  right:26%;
  top:10%;
  bottom:10%;
  overflow-y:scroll;
  overflow-x:hidden;
  padding:3px;
  transform:rotateX(180deg);
}
.sub{
  transform:rotateX(180deg);
}
</style>
<body>
<div class="pbcb">
  <div class="sub">
    <div  style="float:right;background-color:yellow;clear:both;margin-bottom:10px;height:auto;">
      <button class="btn dropdown-toggle mright" style="background-color:#FFFF00;color:black;">one</button>
    </div>
    <div  style="float:right;background-color:yellow;clear:both;margin-bottom:10px;height:auto;">
      <button class="btn dropdown-toggle mright" style="background-color:#FFFF00;color:black;">two</button>
    </div>
    <div  style="float:right;background-color:yellow;clear:both;margin-bottom:10px;height:auto;">
      <button class="btn dropdown-toggle mright" style="background-color:#FFFF00;color:black;">three</button>
    </div>
    <div  style="float:right;background-color:yellow;clear:both;margin-bottom:10px;height:auto;">
      <button class="btn dropdown-toggle mright" style="background-color:#FFFF00;color:black;">four</button>
    </div>
    <div  style="float:right;background-color:yellow;clear:both;margin-bottom:10px;height:auto;">
      <button class="btn dropdown-toggle mright" style="background-color:#FFFF00;color:black;">five</button>
    </div>
  </div>
</div>
</body>
</html>

修正后所有消息会按顺序垂直靠右排列，不会出现横向并排的问题，内容也不会溢出容器，固定容器的滚动功能也可以正常使用。

内容的提问来源于stack exchange，提问作者Aadhineni Ganesh