Bootstrap4 d-table-cell中嵌入可滚动div失效的解决方法

使用d-table/d-table-cell实现布局时，默认table-layout属性值为auto，该模式下单元格宽度会被内部内容自动撑开，不会触发内容溢出判定，因此设置的overflow-x: auto无法达到滚动阈值，滚动效果直接失效。

可根据需求选择以下任意一种方案实现：

方案1：保留原有d-table布局，仅做最小修改 #

只需要给外层表格容器和右侧单元格加2个样式约束即可，不需要修改原有滚动div的代码：

• 给外层d-table容器添加table-layout: fixed，强制表格按设定宽度渲染，禁止单元格随内容自动撑宽
• 给右侧承载滚动区域的d-table-cell添加width: 100%，明确指定其占据表格除固定宽度列外的所有剩余空间

对应完整代码：

<div class="d-table mt-3" style="width:100%; table-layout: fixed;">
   <div class="d-table-cell" style="width:200px">
       Menu Left
   </div>
   <div class="d-table-cell bg-success" style="width: 100%;">
      <div class="mx-auto bg-warning overflow-auto" style="width:100%;white-space: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;">
        <div class="cell d-inline-block" style="width:150px;height:100px;background:#eee;margin:5px;"></div>
        <div class="cell d-inline-block" style="width:150px;height:100px;background:#eee;margin:5px;"></div>
        <div class="cell d-inline-block" style="width:150px;height:100px;background:#eee;margin:5px;"></div>
        <div class="cell d-inline-block" style="width:150px;height:100px;background:#eee;margin:5px;"></div>
        <div class="cell d-inline-block" style="width:150px;height:100px;background:#eee;margin:5px;"></div>
        <div class="cell d-inline-block" style="width:150px;height:100px;background:#eee;margin:5px;"></div>
        <div class="cell d-inline-block" style="width:150px;height:100px;background:#eee;margin:5px;"></div>
      </div>
   </div>
</div>

方案2：使用Bootstrap4原生Flex布局（推荐） #

Bootstrap4原生提供完整的Flex布局工具类，相比table布局没有特殊的渲染规则，适配响应式场景更稳定，不会出现这类溢出bug：

• 外层容器用d-flex设为弹性盒子，宽度100%
• 左侧固定宽度栏添加flex-shrink:0，禁止其被压缩
• 右侧自适应栏添加flex-grow-1让其占据剩余宽度，同时加min-width:0（Flex项默认min-width:auto会被内容撑宽，该属性强制约束宽度），内部滚动div无需任何修改即可正常生效

对应完整代码：

<div class="d-flex mt-3 w-100">
   <div style="width:200px; flex-shrink:0;">
       Menu Left
   </div>
   <div class="flex-grow-1 bg-success" style="min-width:0;">
      <div class="mx-auto bg-warning overflow-auto" style="width:100%;white-space: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;">
        <div class="cell d-inline-block" style="width:150px;height:100px;background:#eee;margin:5px;"></div>
        <div class="cell d-inline-block" style="width:150px;height:100px;background:#eee;margin:5px;"></div>
        <div class="cell d-inline-block" style="width:150px;height:100px;background:#eee;margin:5px;"></div>
        <div class="cell d-inline-block" style="width:150px;height:100px;background:#eee;margin:5px;"></div>
        <div class="cell d-inline-block" style="width:150px;height:100px;background:#eee;margin:5px;"></div>
        <div class="cell d-inline-block" style="width:150px;height:100px;background:#eee;margin:5px;"></div>
        <div class="cell d-inline-block" style="width:150px;height:100px;background:#eee;margin:5px;"></div>
      </div>
   </div>
</div>

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