MUI X Data Grid设置flex:1后移动端仍无响应问题求助

问题排查 #

你的列配置里存在一个拼写错误：yearOfStudy字段中写的是flrx: 1，正确属性名应为flex: 1，这个错误会导致该列无法参与flex布局，打乱整体的自适应分配逻辑。

解决方案 #

针对移动端文本截断、无法自适应伸缩的问题，可按以下步骤调整：

1. 修复属性拼写错误
   修正yearOfStudy列的属性：

{
  field: 'yearOfStudy',
  headerName: 'Year of Study',
  type: 'number',
  flex: 1, // 将flrx改为flex
  sortable: false,
  editable: false,
  align: "left",
  headerAlign: 'left'
},

2. 开启文本换行+设置列最小宽度
   给需要自适应的列添加wrapText: true，同时设置minWidth避免列被压缩过窄：

{
  field: 'moduleName',
  headerName: 'Module Name',
  flex: 1,
  minWidth: 120, // 根据内容调整最小宽度
  wrapText: true, // 开启文本换行，替代截断
  editable: false,
  sortable: false,
  filter: false,
  hideable: false
},

其他列可参照此方式配置，根据内容调整minWidth数值。

3. 确保表格容器的响应式宽度
   给Data Grid组件设置width: '100%'，让表格占满父容器宽度：

<DataGrid
  rows={rows}
  columns={columns}
  width="100%"
  autoHeight // 可选：让表格高度自适应内容
/>

4. 移动端隐藏非关键列（可选）
   如果列数过多，可结合媒体查询隐藏次要列，优先展示核心内容：

{
  field: 'id',
  headerName: 'ID',
  hide: window.innerWidth < 768, // 屏幕宽度小于768px时隐藏
},

效果说明 #

修正后，表格会在移动端根据容器宽度自动分配列宽，文本会换行展示而非直接截断，同时保证列不会被压缩到无法阅读的宽度。

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