CSS Grid实现桌面右侧侧边栏移动端顶部堆叠的溢出问题求助

1. 修复桌面端窗口缩小后的溢出问题 #

原代码中第一列使用auto作为宽度，auto会基于列内内容的最小宽度计算，不会主动收缩以适应容器宽度，导致窗口变窄时出现横向溢出。将第一列宽度改为1fr，让它占据容器的剩余空间，侧边栏保持固定350px：

.grid-container{
  display: grid;
  /* 把auto换成1fr，让第一列占据剩余可用空间 */
  grid-template-columns: 1fr 350px;
  grid-template-rows: 1fr;
  grid-template-areas: "table-section filter-section";
  /* 确保容器宽度不超出父级，padding不会额外增加宽度 */
  width: 100%;
  box-sizing: border-box;
}

如果table-section内的内容（比如表格）本身宽度超过容器，给该区域添加横向滚动避免内容撑爆：

.table-section{
  grid-area: table-section;
  overflow-x: auto;
}

2. 设置移动端侧边栏全屏顶置 #

针对移动端的grid-container-mobile类，设置单列布局，让侧边栏排在顶部并自动铺满屏幕：

.grid-container-mobile{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr; /* 侧边栏高度自适应内容，表格区域占剩余高度 */
  grid-template-areas: 
    "filter-section"
    "table-section";
  width: 100%;
  box-sizing: border-box;
}
/* 移动端取消侧边栏固定宽度，让它铺满容器 */
.grid-container-mobile .filter-section{
  width: 100%;
}

完整修改后代码 #

CSS部分 #

.grid-container{
  display: grid;
  grid-template-columns: 1fr 350px;
  grid-template-rows: 1fr;
  grid-template-areas: "table-section filter-section";
  width: 100%;
  box-sizing: border-box;
}
.grid-container-mobile{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: 
    "filter-section"
    "table-section";
  width: 100%;
  box-sizing: border-box;
}
.table-section{
  grid-area: table-section;
  overflow-x: auto; /* 处理内容溢出 */
}
.filter-section{
  grid-area: filter-section;
}
.grid-container-mobile .filter-section{
  width: 100%;
}

HTML部分 #

移除可能和Grid布局冲突的Quasar列类（col、col-auto），避免样式干扰：

<div class="full-height" :class="$q.screen.lt.md ? 'grid-container-mobile' : 'grid-container'">
  <div class="table-section q-pa-md">
    <!-- 表格内容 -->
  </div>
  <div class="filter-section q-pa-md">
    <TableFilters />
  </div>
</div>

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