Make Div with text responsive using VW?
<p>Currently, I am using units: "vw" to make my textbox responsive.</p>

<p><strong>First fiddle (Non-responsive)</strong>: <a href="https://jsfiddle.net/jzhang172/w7yhd6xx/2/" rel="nofollow">https://jsfiddle.net/jzhang172/w7yhd6xx/2/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#second{
 height:635px;
  background:gray;

}
#second-try{
  height:635px;
}
.about-us-info {
 margin: 0 auto;
 width: 900px;
 height: 313px;
 border: 2px solid #3c3c3c;
 position: absolute;
 left: 50%;
 margin-left: -450px;
 top: 50%;
 margin-top: -160px;
}
span.span-header {
 text-align: center;
 display: block;
 /* margin-top: -22px; */
 position: relative;
 font-size: 34px;
 background: white;
 width: 420px;
 margin: 0 auto;
 margin-top: -21px;
 /* border: 1px solid black; */
 text-transform: uppercase;
 font-family: latobold;
 letter-spacing: .16em;
}

.about-us-info p {
 text-align: center;
 /* line-height: 28px; */
 line-height: 1.65em;

}
.about-us-info p.first {

 margin-top:50px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="section" id="second"&gt;
  
  &lt;div class="about-us-info"&gt;
   &lt;span class="span-header"&gt;About Us&lt;/span&gt;
   &lt;p class="first"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.   &lt;br&gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
   &lt;/p&gt;
   &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit.  &lt;br&gt;
    Lorem ipsum dolor sit amet, consectetur.&lt;br&gt;
    Lorem ipsum dolor sit amet, consectetur. &lt;br&gt;
    Lorem ipsum dolor sit amet, consectetur.&lt;br&gt;
    Lorem ipsum dolor sit amet, consectetur.
   &lt;/p&gt;
  &lt;/div&gt;
 &lt;/div&gt;
  </code></pre>
</div>
</div>
</p>

<p><strong>Second fiddle (Attempt at responsiveness using "<em>vw</em>"):</strong><a href="https://jsfiddle.net/jzhang172/9Lagw1y6/1/" rel="nofollow">https://jsfiddle.net/jzhang172/9Lagw1y6/1/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.section{
  position:relative;
}

#second{
 min-height:635px;

}

.about-us-info {
    margin: 0 auto;
    width: 46.9vw;
    /* height: 16.3vw; */
    border: 2px solid #3c3c3c;
    position: absolute;
    left: 50%;
    margin-left: -23.4vw;
    top: 50%;
    margin-top: -160px;
}span.span-header {
    text-align: center;
    display: block;
    /* margin-top: -22px; */
    position: relative;
    font-size: 34px;
    background: white;
    width: 420px;
    width: 21.875vw;
    margin: 0 auto;
    margin-top: -21px;
    /* border: 1px solid black; */
    text-transform: uppercase;
    font-family: latobold;
    letter-spacing: .16em;
}

.about-us-info p {
 text-align: center;
 /* line-height: 28px; */
 line-height: 1.65em;

}
.about-us-info p.first {

 margin-top:50px;
}

/*----Third section--------*/

#third{
 min-height:488px;
  background:gray;
}

#services-info{

 margin-top:-125px;
 border:2px solid white;
 border-top:0px;
}
#services-header{
 background:transparent;
 color:white;

}
#services-paragraph{
 color:white;
}
#services-header:before, #services-header:after {
    content: "";
    position: absolute;
    height: 5px;
    border-top: 2px solid white;
    top: 19px;
    width: 11.8vw;
}
#services-header:before {
    right: 100%;
    margin-right: .85vw;
}
#services-header:after {
 left: 100%;
 margin-left: .85vw;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="section" id="second"&gt;
  
  &lt;div class="about-us-info"&gt;
   &lt;span class="span-header"&gt;About Us&lt;/span&gt;
   &lt;p class="first"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.   &lt;br&gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
   &lt;/p&gt;
   &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit.  &lt;br&gt;
    Lorem ipsum dolor sit amet, consectetur.&lt;br&gt;
    Lorem ipsum dolor sit amet, consectetur. &lt;br&gt;
    Lorem ipsum dolor sit amet, consectetur.&lt;br&gt;
    Lorem ipsum dolor sit amet, consectetur.
   &lt;/p&gt;
  &lt;/div&gt;
 &lt;/div&gt;
  
  
   &lt;div class="section" id="third"&gt;
  &lt;div class="about-us-info" id="services-info"&gt;
   &lt;span class="span-header" id="services-header"&gt;Services&lt;/span&gt;
   &lt;p class="first" id="services-paragraph"&gt;
    Lorem ipsum dolor sit amet, consectetur&lt;br&gt;
    Lorem ipsum dolor sit amet, consectetur.&lt;br&gt;
    Lorem ipsum dolor sit amet, consectetur&lt;br&gt;
    Lorem ipsum dolor sit amet, consectetur&lt;br&gt;
    Lorem ipsum dolor sit amet, consectetur.
   &lt;/p&gt;
  &lt;/div&gt;
 &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Here are some errors that I'd like to be corrected but not sure how to:<br>
1.) Is VW being used properly here?  Is there a better solution?<br>
2.) I'd like the height of each section to expand based on the content within while maintaining a min-height of each section (635px for the first and 488 for the second) because right now when re-sizing the browser smaller, the content overlaps anything underneath it.</p>

<p>Is there any problem using this solution?  Is there a better solution? </p>