How to prevent over scale for UI Image in Unity

Because this is pretty hard to imagine, so I will try to describe it along with images.

This is my parent object that contains 2 children, the "Are you sure" text and "Yes No" Buttons (nvm the white one):

Now here's the problem, the scaling of text and buttons works just fine if I put them inside the anchor with setup like this (I set anchors of both object text and buttons container like that, so when scaling they will not be collapse on each other):

But since I want to make appearance animation using unity animator (it will slide down), I must place the Text outside of the parent object (above it / outside the viewport), and because the distance between the 4 Text's corners to the Anchors is a fixed value. So every time I scale the game tab, the text will just overlap the viewport like this:

So my question is: how can I maintain the distance between the out border Text object and its parent (here is the yellow panel) while it still can scale to fit inside its anchors inside the parent object (like the second image) when the animation is called and it is placed in place?

I tried to search for bunch of tutorials and messing with its anchors and pivot for hours, but it seem hopeless since there's no video or documents cover on this kind of problem :/

Any support or suggestion would be appreciated a lot.

For anyone interested in this question. Use "AspectRatioFitter" component to maintain the height ratio and set the anchor to one line of width, which means it's only can be scaled horizontally. But with "AspectRatioFitter", it will scale the height for you too. And woala, you achieved your aim is to maintain the distance while it still can be scaled.