flexbox布局下防止表格溢出父容器 解决水平滚动条被截断问题

核心成因 #

flex布局的子项默认min-width取值为auto，该规则会让右侧列的最小宽度被内部的宽表格撑开，无法跟随父容器收缩到小于内容宽度的尺寸，最终导致滚动条触发阈值异常、甚至被截断超出可视区域。

解决方案 #

仅需给右侧存放表格的flex列添加 min-width: 0 属性即可，示例代码如下：

/* 右侧flex列的样式 */
.right-content {
  flex: 1;
  /* 新增该属性 */
  min-width: 0;
}

该属性会覆盖默认的auto取值，允许flex子项收缩到比内部内容更小的宽度，此时你给表格外层容器设置的overflow-x: auto就能正常识别容器的实际可用宽度，在表格超出宽度时正确触发水平滚动，完全不需要使用你提到的table-layout、固定宽度、calc()等禁用方案。

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