Bootstrap 4/Flexbox IE11布局问题：列表溢出及Flexbox替代方案咨询

一、修复IE11里旧Bootstrap网格的列表溢出问题 #

你遇到的IE11中列表跨列覆盖的问题，主要是因为旧版Bootstrap（比如v3）的网格依赖浮动布局，加上IE11对Flexbox的兼容性bug（如果你的.row用了display:flex来实现等高的话），导致列的宽度计算异常，列表内容无法被正确约束在列内。可以试试这几个方案：

1. 给列添加Flex兼容属性
   如果你的.row已经用了display:flex来实现等高，给每个.col-md-6加上以下样式，强制IE11正确计算列宽并约束内容：

   .col-md-6 {
     flex: 1;
     min-width: 0; /* IE11必备，打破内容撑开容器的默认行为 */
     overflow: hidden; /* 确保列表内容被限制在列内 */
   }
   

   min-width:0是关键——IE11中flex子元素默认会根据内容宽度撑开，忽略容器约束，这个属性能修复这个问题。

2. 给列表添加容器约束
   如果不想修改列的样式，也可以直接给列内的<ul>设置约束：

   .your-list-class {
     overflow: hidden;
     width: 100%;
   }
   

   强制列表继承列的宽度，避免内容溢出到其他列。

3. 配合Bootstrap等高列工具类
   旧版Bootstrap有row-eq-height类（需要配合flexbox或table布局），给.row加上这个类，确保列等高的同时，IE11能更好地识别列的边界：

   <div class="row row-eq-height">
     <div class="col-md-6">...</div>
     <div class="col-md-6">...</div>
   </div>
   

   不过这个类在IE11里可能还是需要配合前面的min-width:0来彻底修复溢出问题。

二、纯Flexbox实现响应式两列布局（跳过Bootstrap） #

如果不想依赖Bootstrap网格，用纯Flexbox可以更简洁地实现需求，而且兼容性也不错（IE11大部分支持）。以下是完整示例：

HTML结构

<div class="flex-container">
  <div class="flex-column">
    <h3>列1内容</h3>
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>很长很长的列表项，测试是否会溢出到其他列</li>
    </ul>
  </div>
  <div class="flex-column">
    <h3>列2内容</h3>
    <ul>
      <li>列2列表项1</li>
      <li>列2列表项2</li>
      <li>列2超长列表项，确保被约束在自己的列内</li>
    </ul>
  </div>
</div>

CSS样式

/* 基础布局：移动端堆叠 */
.flex-container {
  display: flex;
  flex-wrap: wrap; /* 允许子元素换行 */
  margin: 0 -15px; /* 模拟Bootstrap的row负margin，抵消列的padding */
}

.flex-column {
  flex-basis: 100%; /* 移动端占满整行 */
  padding: 0 15px; /* 模拟Bootstrap的列间距 */
  box-sizing: border-box; /* 确保padding不增加宽度 */
}

/* 大屏下（768px以上）两列等高并排 */
@media (min-width: 768px) {
  .flex-column {
    flex: 1; /* 自动分配剩余空间，实现等高 */
    flex-basis: 0; /* 配合flex:1，让两列宽度均等 */
    min-width: 0; /* 兼容IE11，防止内容溢出 */
  }
}

/* 可选：列表样式优化 */
.flex-column ul {
  list-style: none;
  padding-left: 0;
  overflow: hidden; /* 双重保险，防止超长内容溢出 */
}

关键说明：

• flex-wrap:wrap确保在小屏幕下子元素自动换行堆叠。
• flex:1在大屏下让两个列平分宽度，并且自动等高（Flexbox默认子元素高度对齐）。
• min-width:0是兼容IE11的核心，避免内容撑开列导致溢出。
• 用margin和padding模拟Bootstrap的列间距，不需要的话可以直接去掉。

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