如何强制内部内容带min-width的div保持50%宽度并显示水平滚动条

解决方案 #

你只需要给第一个col-xs-6容器添加对应的溢出和宽度限制属性，就能实现固定50%宽度、超出自动显示水平滚动条的需求。

修改后完整代码

<div class="col-xs-6" style="width: 50%; overflow-x: auto; min-width: 0;">
  <div style="min-width:1000px">
    <label>In here goes the value of the In here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the vae value of the In here goes the value of the In here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the vae value of the</label>
  </div>
</div>
<div class="col-xs-6" style="width: 50%;">
  <label>TEST</label>
</div>

新增属性说明

• width: 50%：显式指定容器宽度占比为父容器的一半，避免被内部内容撑开
• overflow-x: auto：当内部内容宽度超过容器宽度时，自动展示水平滚动条，不会撑开外层容器
• min-width: 0：适配flex布局场景下的兼容性问题，flex布局的子项默认min-width值为auto，会优先满足内部内容的最小宽度需求，添加该属性后会强制遵循你设置的50%宽度规则；如果你用的是传统浮动布局的Bootstrap栅格，去掉该属性也可正常运行。

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