Flexbox + fittext - 溢出文本

Question

我有一个像这样的基本flexbox布局......

 jQuery(".section1").fitText();

    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;
  display: flex;
  flex-direction:column;
}

.bottom_content {
  display: flex;
  flex-direction: column;
  /*Add*/
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
}

.section1 {

  font-size: 20px;
  text-align: center;
  align-items: center;
  position: relative;
  height: 50%;
  width: 100%;
}


.section2 {

  align-items: center;
  position: relative;
  height: 50%;
}

.btn {
    background: red;
    color: white;
    padding: 20px;
    width: 40%;
    margin: auto;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.js"></script>


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

  </div>
</div>

我正在尝试使用fittext.js来动态调整文本大小以适应容器，但由于某种原因，它会溢出并且无法正常工作。

谁能看到我哪里出错了？