Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

I want to have horizontally scrollable component when screen width don't let component to be displayed properly. When screen gets smaller I and component becomes scrollable I can scroll to right side and see full component, but when I scroll to left part of the component from left side is cut and cannot be displayed.

here is full component

I can easily scroll to the right

But not to the left

This is how implementation looks like:

style={{ overflow: 'hidden', display: 'flex', justifyContent: 'center', <StyledWheelsPanelToolbarWrapper style={{ overflowX:'scroll'}}> <StyledToggleButtonGroupWheelsMobile value={alignment} exclusive onChange={handleAlignment} enter code here Please post rendered HTML and CSS for layout questions. You can then backport solutions to your React app code. – isherwood Feb 23, 2022 at 14:01 I found the solution, maybe will be useful for somebody one day. One the <StyledWheelsPanelToolbarWrapper/> I had flex-direction:column property, although there was nothing to order column-wise. Don't know why exactly it hidden part of the child component but it actually helped – marcinb1986 Feb 23, 2022 at 21:55

that is because you are setting justify to center, so content is centred. Just remove justifyContent:'center' justify content position your content horizontaly and align verticly.

thanks, this was exactly what I was doing wrong. I'm still looking for a way to center the elements if there's an underflow, without justifyContent its just left-aligned by default. – Prnth Nov 15, 2022 at 20:19

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question . Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers .