div中的动态字体大小

Question

我的字体大小有问题。如果我写的世界太长，我希望font-size自动缩放（p元素类mainPromoText）没有滚动条，但不会发生。
这是我的HTML和CSS代码：

body {
  background-color: #1a1e22;
}

.firstPageLogin {
  background-color: #32322f;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 15vh;
}

.mainAppName {
  color: #ffffff;
  font-size: 2vw;
  text-align: center;
  padding: 10vh;
}

.mainPromoText {
  color: #ffffff;
  font-size: 10vw;
  text-align: center;
  display: flex;
  flex-direction: column;
}

/*
section {
  position: relative;
  top: 24%;
  text-align: center;
}

.loginCheckbox {
  color: #ffffff;
}
.loginCheckboxText {
  color: #ffffff;
}
*/

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class='container-fluid'>
  <div class="row justify-content-start">
    <div class='col-sm-12'>
      <p class='mainPromoText'>zyciakjgjdfhghjkdhfgkjdghfjdgkfjdlkfjgdkljldkjgkljdfkgljfdklgjdflkdgfjgkld</p>
      <p class='mainAppName'>Apka</p>
    </div>
  </div>
</div>
<div class='container-fluid firstPageLogin col-sm-offset-4 col-sm-4' style='max-width: 80vw;'>
  <div class="row-justify-content-start">
    <div class="col-sm-offset-4 col-sm-4" style='background-color: #ffffff'></div>
  </div>
  <div class="row-justify-content-end">
    <div class="col-sm-offset-4 col-sm-4" style='background-color: #ffffff'></div>
  </div>
</div>

感谢您的帮助