Overflow-x：滚动剪切组件的左侧

Question

当屏幕宽度不允许组件正确显示时，我希望拥有可水平滚动的组件。 当屏幕变小时，组件变得可滚动，我可以滚动到右侧并看到完整的组件，但是当我滚动到左侧时，左侧的部分组件被剪切并且无法显示。

这是完整的组件

我可以轻松地向右滚动

但不是向左

这就是实现的样子：

<div
                    style={{
                        overflow: 'hidden',
                        display: 'flex',
                        justifyContent: 'center',
                    }}
                >
                    <StyledWheelsPanelToolbarWrapper style={{ overflowX:'scroll'}}>
                        <StyledToggleButtonGroupWheelsMobile
                            value={alignment}
                            exclusive
                            onChange={handleAlignment}
                        > 
                            ....

enter code here

Answer 1

那是因为你将 justify 设置为 center，所以内容居中。只需删除

justifyContent:'center'

调整内容水平放置您的内容并垂直对齐。

Answer 2

设置 justifycontent:center 并将项目居中，设置align-self:center;在每个子项目中。