如何在CSS Grid中实现仅某一行的水平滚动？

你的需求完全可以通过CSS Grid实现，问题出在Grid列轨道的宽度限制了.item-a的尺寸，导致滚动无法触发。下面是修正后的方案：

问题根源 #

原代码中grid-template-columns: 200px固定了列轨道宽度，.item-a作为Grid单元格，其宽度会被轨道约束，设置的width:600px无法生效，因此无法触发水平滚动。

修正方案 #

给.item-a内部添加一个嵌套容器，将文本内容放入其中，通过内部容器设置超出宽度，.item-a只负责提供滚动容器：

修改后的CSS #

.container {
  box-sizing: border-box;
  height: 350px;
  max-width: 300px;
  border: 3px dotted gray;
  overflow: hidden;
  display: grid;
  grid-template-areas: 'item-a' 'item-b';
  grid-template-rows: 1fr 120px;
  /* 调整列轨道为auto，让单元格适应内容但受容器max-width限制 */
  grid-template-columns: auto;
  background-color: grey;
}

.item-a {
  grid-area: item-a;
  border: 3px dotted green;
  overflow-x: auto;
  overflow-y: hidden;
  background-color: green;
}

/* 新增内部容器，设置超出宽度触发滚动 */
.item-a-content {
  width: 600px;
}

.item-b {
  grid-area: item-b;
  border: 3px dotted yellow;
  background-color: yellow;
}

修改后的HTML #

<div class="container">
  <div class="item-a">
    <div class="item-a-content">
      Grid child 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat, tortor ut luctus semper, turpis dui consequat ipsum, vitae gravida nunc purus non arcu. Proin congue, turpis eget tempor tristique, turpis eros lobortis nibh, lobortis suscipit nisi mi ut dolor. Duis aliquam interdum ipsum. Aenean id metus quis quam mollis interdum. Curabitur vel lectus a quam mollis consequat. Sed auctor efficitur viverra. Aenean iaculis enim diam, eget sodales augue consequat volutpat. Praesent placerat mi diam, sed elementum lacus eleifend in. Nulla sit amet dolor at tortor aliquet semper. Integer et sodales elit, quis pulvinar felis. Suspendisse et sodales ipsum. Aenean sem quam, tempor a metus sed, malesuada aliquet sapien. Nullam aliquam magna at congue sollicitudin.
    </div>
  </div>

  <div class="item-b">
    Grid Child 2
  </div>
</div>

效果说明 #

• .item-a内部的内容容器宽度设为600px，超出.container的300px宽度限制，触发.item-a的水平滚动
• .item-b保持原有布局，不会随滚动移动
• 容器.container整体无滚动，完全符合需求

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