admin-on-rest：无法在宽列表视图上水平滚动

Question

如果在Safari移动设备上运行Admin-on-rest（可能是所有小屏幕），则无法水平滚动宽视图。这尤其成问题，因为在列表视图中，“编辑”链接通常位于行的右侧。

没有办法缩小缩小以露出页面缺失的部分。

可以在演示网站上复制：https://marmelab.com/admin-on-rest-demo/#/

看起来罪魁祸首是使用flex-direction: column

的CSS样式

删除此样式会恢复水平滚动。

这是一个错误（可能是一个跨浏览器的问题吗？），还是因为我不知道的原因需要这个限制？

可能的解决方案 ：删除表格容器上的overflow-x: hidden，允许广泛的结果表水平滚动，但保持整个页面宽度相同作为页面，所以按钮/过滤器/等正确对齐。

Answer 1

我正在使用这种方式在小尺寸设备中水平滚动：

export const ReservationList = (props) => (
    <div style={{
        display: "flex",
        flex: "1 1 auto",
        overflowY: "hidden",
        overflowX: "scroll"
    }}>
        <List {...props} title="Reservation List">
            <Datagrid>
              ...  
            </Datagrid>
        </List>
    </div>
);

Answer 2

不要在小屏幕上使用数据网格。请参阅有关此文档的文档：https://marmelab.com/admin-on-rest/Theming.html#responsive-utility