视口文本大小（vh，vw）相对于父容器而不是窗口？

Question

我想要完成的是创建一个框，其中文本与框的大小完全相同，无论框的大小调整大小。

在下面的代码中，“small_box”具有预期的行为，无论如何都会跟随更大的框，但文本没有。我也需要文本来跟随它。

这是codepen https://codepen.io/anon/pen/RxKowB（尝试调整窗口大小以查看行为）

.box {
  border: 2px solid black;
}

.box__frame {
  width: 100%;
  padding-bottom: 120%;
  position: relative;
}

.box__small_box {
  position: absolute;
  top: 4%;
  left: 10%;
  width: 20%;
  padding-bottom: 10%;
}

.box__text {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.box__text_name {
  font-size: 8vw;
  top: 60%;
}

.box__text_body {
  text-align: center;
  font-size: 5vw;
  top: 70%;
}

<div style="max-width:800px;">
  <div class="box box__frame">
    <div class="box box__small_box"></div>
    <div class="box__text box__text_name">
      This is the title
    </div>
    <div class="box__text box__text_body">
      This is the long description. This is the long description. This is the long description.
    </div>
  </div>
</div>

Answer 1

如果文本是浮动的，则可能无法单独使用CSS。

这些库可能有所帮助。

http://simplefocus.com/flowtype/

http://fittextjs.com/