ScrollRect - Scroll outside the rect!?

I have been watching the tutorial about scroll rect : https://www.youtube.com/watch?v=MWOvwegLDl0

I have been trying to create a menu button that when i click on it, a menu drop down. The menu itself is a horizontal scroll menu.

So i got a menu_pa which control size of UI elements for me on the canvas, it only cover the top of the canvas. Inside the menu_pa, There is a Menu_EG that was a empty game object but now with my own drop down animation code that works perfectly. The Menu_But is a child button of Menu_EG. Drop down code will be active by clicking the Menu_But. ScrollRect_Im is a child of the Menu_EG as well. It has the ScrollRect Script component with it. The content go into the ScrollRect Script component is the child of the ScrollRect_Im named Options_EG with only Rect Transform component. All the menu buttons are children of it.

In the tutorial, the text only scroll horizontally because the text box is perfectly fit the ScrollRect, so do my Options_EG's Rect Transform to ScrollRect_Im, but why mu buttons are flying all over the place (Outside of the ScrollRect_Im) vertically and horizaontally? What steps do i missing?