重要な点としては、LayoutGroup コンポーネントの扱いと、制御したいオブジェクトのアンカー位置によって、可変時の伸縮位置が変化します。
＜アンカー調整後＞
動画ファイルへのリンク
設計 
UI においてアンカーの設定は大変重要です。
配置上の問題を解決するだけではなく、可変時の伸縮位置にも影響を与えます。
この概念を理解することで、可変する UI サイズの構成を考えていくことができます。
そのため、アンカーの初期設定を行うだけではなく、さらに詳細な設定を行うことが大切です。
UI のサンプル設計
これらはサンプルです。
実際にはご自分のプロジェクトに応じた内容で制作してください。
＜アンカーの調整＞
可変させたいオブジェクトのアンカーの調整を行います。
初期設定の場合、意図していない位置から伸縮が開始されますので、
実際にオブジェクトのサイズを変更しながら、アンカーの調整を行ってください。
下記はサンプルです。
＜参考サイト＞
Unity 公式マニュアル
基本的なレイアウト
https://docs.unity3d.com/ja/current/Manual/UIBasic...
Unity 公式マニュアル
アンカー
https://docs.unity3d.com/ja/2017.1/Manual/windowsh...
ハルシオンシステム 様
【ハルシオンブログ】SafeAreaHelperの使い方。SafeArea内でゲームを作ろう！
http://halcyonsystemblog.jp/blog-entry-973.html