如何让Flexbox产品列表溢出视口并支持横向滚动？

问题分析 #

当前布局中，.container限制整体宽度为视口的85%，右侧.rightColumn继承该约束，导致产品列表的横向空间被局限在container范围内，无法延伸到视口边缘。即使给.products添加overflow:auto，滚动条也只能在container的85%宽度内生效，无法满足需求。

CSS解决方案 #

通过调整布局结构，让右侧产品栏脱离container的宽度限制，同时保留左侧文本栏的布局，具体修改如下：

修改后的CSS代码

.wrapper{
  overflow: auto;
}

.container{
  max-width: 85%;
  margin-left: auto;
  margin-right: auto;
  display: flex; /* 替换float为flex布局，更易控制对齐 */
  align-items: flex-start; /* 保持两栏顶部对齐 */
}

.leftColumn{
  width: 20%; /* 固定左侧栏宽度，替代原max-width */
}

.rightColumn{
  flex: 1;
  width: calc(100vw - 20%); /* 让右侧栏基于视口宽度计算，突破container限制 */
  margin-left: 20px; /* 可选：添加两栏之间的间距 */
}

.products{
  display: flex;
  gap: 20px;
  overflow-x: auto; /* 开启横向滚动 */
  flex-wrap: nowrap; /* 强制产品不换行 */
  padding-bottom: 10px; /* 可选：给滚动条预留空间，避免遮挡产品 */
}

.product{
   background: #ddd;
   height: 50px;
   width: 300px;
   min-width: 300px;
}

修改后的HTML代码（修正原拼写错误）

<div class="wrapper">
  <div class="container">
    <div class="leftColumn">
      <p>
          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.
      </p>
    </div>
    <div class="rightColumn">
        <div class="products">
            <div class="product">
               <p>Product 1</p>
            </div>
            <div class="product">
               <p>Product 2</p>
            </div>
            <div class="product">
               <p>Product 3</p>
            </div>
            <div class="product">
               <p>Product 4</p>
            </div>
            <div class="product">
               <p>Product 5</p>
            </div>
            <div class="product">
               <p>Product 6</p>
            </div>
            <div class="product">
               <p>Product 7</p>
            </div>
            <div class="product">
               <p>Product 8</p>
            </div>
        </div>
    </div>
  </div>
</div>

关键改动说明 #

1. Flex布局替代Float：避免float布局的高度塌陷问题，更精准控制两栏的对齐方式和宽度分配。
2. 右侧栏突破宽度限制：使用calc(100vw - 20%)让右侧栏直接以视口宽度为基准计算，脱离.container的85%宽度约束，从而延伸到视口边缘。
3. 横向滚动配置：overflow-x: auto在产品列表超出宽度时自动显示滚动条，flex-wrap: nowrap确保产品保持横向排列不换行。

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