Why couldn't I scroll left to see the left part of my div when I shrink my browser?

I’m doing project D3 Bar Chart. When I shrink my browser horizontally small enough, the left part of my div (#chart) is hidden and i couldn’t scroll left to see it. Could you help me know why this happens and how to solve it?

Image: https://ibb.co/4jk5LFN

Here is the link to my code: https://codepen.io/OtterB8/pen/abodeKK

Thank you!

I removed display: flex from the body and it works fine. Don’t know enough about the new flexible container to explain why.

Thank you! I’ll research more on it with your help.

I found the answer here, for any one with the same concerns: https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container

1 Like