如何实现三个div同行排列：两侧固定宽、中间自适应可滚动？

哈哈，这个布局需求简直是前端入门的经典坑！我当初刚学布局时也折腾了好久——要么中间div把两边挤变形，要么第三个div直接跑到下一行，要么滚动条死活不生效。别愁，给你几个稳得一批的实现方案，尤其是Flexbox，绝对是解决这种问题的最优解！

Flexbox就是为这种弹性分配空间的场景设计的，完全不用手动算宽度，浏览器自动帮你搞定。

HTML结构 #

<div class="container">
  <div class="left">左侧固定宽度</div>
  <div class="middle">
    这里可以塞超多内容测试滚动：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="right">右侧固定宽度</div>
</div>

CSS样式 #

.container {
  display: flex; /* 把容器变成Flex容器，子元素默认横向排列 */
  width: 100%; /* 确保容器占满父级宽度 */
}

.left, .right {
  width: 200px; /* 自定义你需要的固定宽度 */
  flex-shrink: 0; /* 核心！防止左右div被中间内容挤扁 */
  background: #f0f0f0;
  padding: 8px;
}

.middle {
  flex: 1; /* 自动占据剩余所有水平空间 */
  overflow-x: auto; /* 内容超出时显示横向滚动条，纵向用overflow-y: auto */
  padding: 0 12px;
  background: #fff;
}

关键细节：flex-shrink: 0一定要加在左右div上，不然当中间内容特别长时，浏览器会压缩左右div的宽度来腾出空间，这就是你之前可能遇到的“破坏显示效果”的原因！

如果你后续可能需要更复杂的网格布局，Grid也是个非常直观的选择，代码同样简洁：

CSS样式（HTML结构和上面一致） #

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* 三列宽度：固定200px、剩余空间、固定200px */
  width: 100%;
}

.left, .right {
  background: #f0f0f0;
  padding: 8px;
}

.middle {
  overflow-x: auto;
  padding: 0 12px;
  background: #fff;
}

这里的1fr就是“剩余空间”的意思，Grid会自动帮你分配，完全不用手动计算，非常省心。

如果需要兼容IE9及以下这种老古董，可以用这个传统方法，但要注意处理浮动的副作用：

CSS样式（HTML结构不变） #

.container {
  width: 100%;
  overflow: hidden; /* 清除浮动，防止容器高度塌陷 */
}

.left {
  width: 200px;
  float: left;
  background: #f0f0f0;
  padding: 8px;
}

.right {
  width: 200px;
  float: right;
  background: #f0f0f0;
  padding: 8px;
}

.middle {
  width: calc(100% - 400px); /* 总宽度减去左右两个200px的宽度 */
  margin: 0 200px; /* 留出左右div的位置 */
  overflow-x: auto;
  padding: 0 12px;
  background: #fff;
}

这个方法需要手动计算宽度，而且要处理浮动带来的容器塌陷问题，所以除非必要，优先选前两种方案。

最后再提醒你几个容易踩的坑：

• 不要给中间div设置固定宽度，否则无法自适应剩余空间；
• 滚动方向要选对：如果是横向长内容用overflow-x: auto，纵向内容溢出用overflow-y: auto，不确定的话可以用overflow: auto让浏览器自动判断；
• 确保容器的宽度是有效的（比如父级没有设置overflow: hidden导致宽度被限制）。

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