浮动框，其左上角具有垂直对齐的字体大小和响应文本的div

Question

我有一个固定高度的div和另一个位于父框右下角的框。它的高度是固定的。

我在想使它具有响应能力。字体大小将是可响应的，但如果屏幕尺寸真的很大，它将不会超出框的边距。我也想保持文本的垂直对齐。

@import url(https://fonts.googleapis.com/css?family=Karla);body{overflow:hidden;margin:0;text-align:left;color:#0d3852;font-family:Karla}#container{width:100%;height:100px;background:#124;text-align:center}#right{float:right;margin-top:50px;width:33.33%;min-height:120px;background:#f1f1f1}.queries{text-align:left;margin-left:3%;margin-top:3%}.line2{font-size:1.1vw;}.line1{font-size: 2vw;}

<div id="container">
    <div id="right">
       <h1 class="queries line1">TEMPLATE<br>TEMPLATE</h1>
       <h3 class="queries line2">Template, Template, Template, Template and Template Temp</h3>
       <h3 class="queries line2">01 Jul 2018 - 21 Aug 2018</h3>    
    </div>
</div>

因此，我在考虑调整当前代码是否容易，或者尝试使用flexbox： LINK

或尝试如下操作：

.parent-box {
    background:#124;
    width: 100%;
    height:200px;
}

.float-lower-left {
    background:#ccc;
    position: relative;
    float: right;
    right: 0;
    top: -50px;
    right: 0;
    width: 33.33%;
    height:100px;
}

#outer {
    height:100%;
    padding:10% 0;
    box-sizing:border-box;
}

#inner1 {
    font-size:3.5vw;
    height:70%;;
    display:flex;
    justify-content:left;
    align-items:center;
    background-color: yellow;
}

#inner2 {
    font-size:2vw;
    height:50%;
    display:flex;
    justify-content:left;
    align-items:center;
    background-color: red;
}   

<textarea class="parent-box">
</textarea>
<span class="float-lower-left" >
    <div id="inner1">
         Template<br>Template
     </div>
     <div id="inner2">
         Template, Template, Template, Template Temp
    </div>  
</span>

Answer 1

我设置了超过728px的限制。

@import url(https://fonts.googleapis.com/css?family=Karla);

body{
  overflow:hidden;
  margin:0;
  text-align:left;
  color:#0d3852;
  font-family:Karla;
 }

#container{
  width:100%;
  height:100px;
  background:#124;
  text-align:center;
}

#right{
 float:right;
 margin-top:50px;
 width:33.33%;
 min-height:120px;
 background:#f1f1f1;
}

.queries{
   text-align:left;
   margin-left:3%;
   margin-top:3%
}

.line2{
   font-size:1.1vw;
}

.line1{
  font-size: 2vw;
}

.parent-box {
  background:#124;
  width: 100%;
  height:200px;
}

.float-lower-left {
  background:#ccc;
  position: relative;
  float: right;
  right: 0;
  top: -50px;
  right: 0;
  width: 33.33%;
  height:100px;
}

#outer {
    height:100%;
    padding:10% 0;
    box-sizing:border-box;
}

#inner1 {
  font-size:3.5vw;
  height:70%;;
  display:flex;
  justify-content:left;
  align-items:center;
  background-color: yellow;
}

#inner2 {
  font-size:2vw;
  height:50%;
  display:flex;
  justify-content:left;
  align-items:center;
  background-color: red;
}

@media screen and (min-width: 728px) {
  #inner1 {
     font-size: 26px;
  }
  #inner2 {
     font-size: 18px;
  }
}

<div id="container">
    <div id="right">
        <h1 class="queries line1">TEMPLATE<br>TEMPLATE</h1>
        <h3 class="queries line2">Template, Template, Template, Template and Template Temp</h3>
        <h3 class="queries line2">01 Jul 2018 - 21 Aug 2018</h3>    
    </div>
</div>

<textarea class="parent-box">
</textarea>
<span class="float-lower-left" >
    <div id="inner1">
         Template<br>Template
     </div>
     <div id="inner2">
         Template, Template, Template, Template Temp
    </div>  
</span>