html - Flexbox レイアウト - 等しい高さと fittext

Question

フレックスボックスを使用して基本的なユーザー インターフェイスを構築しようとしていますが、これまでのところ..

  body,html {
  margin:0;
  padding:0;
  height:100%;
  }
  
  .container {
    height:100%;
    display:flex;
    flex-direction:column;
  }

  .top {
    flex:4;
    display:flex;
    background:wheat;
    align-items: center;
    justify-content: center;
  }

  .bottom {
    flex:1;
    background:teal;
  }

  .bottom_content {
    display:flex;
    flex-direction:column;
  }

  .section1 {
    flex:1;
    font-size:20px;
    text-align:center;
  }

  .section2 {
    flex:1;
  }
  
  .btn {
    background:red;
    color:white;
    padding:20px;
  }

<div class="container">

  <div class="top">
    <span>TOP CONTENT</span>
  </div>
  
  <div class="bottom">
    
    <div class="bottom_content">
      
      <div class="section1">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus quam, blandit non lacus in, venenatis tempor dolor. Aliquam in lectus lacus. </span>
      </div>
      
      <div class="section2">
        <div class="btn">
          THIS IS A BUTTON
        </div>
      </div>
    
    </div>
  
  </div>

  
</div>

私はこれを達成しようとしています...

下部セクションを同じ高さで作成し、その中のコンテンツを垂直方向と水平方向の中央に配置するにはどうすればよいですか?

また、fittext.js などを使用して、ボタンと上記のテキストをフレックス アイテムに収まるようにすることも計画しています。

どこが間違っていますか？