css - 溢出-x : scroll cuts left side of the component

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 设置为居中，所以内容居中。只需删除 justifyContent:'center'对齐内容水平放置您的内容并垂直对齐。