我无法使 parent div 展开以适应其内容

Question

我希望 header div（包含 background 和问候语文本）在 window 调整大小时（与其一起扩展）伸展以容纳文本内容）。我尝试将 overflow:auto 和 overflow:hidden 添加到 header div 及其 parent 容器中，但没有成功。我的代码中是否存在导致此功能无法正常工作的冲突？

这是我创建的一个 jsfiddle：https://jsfiddle.net/gxpwxhfh/

我有这个 html 用于 header 部分：

<div class='wrap'>   
<div id='header'>
    <div id='about'>

        <div id='hello'>
            <h1>Hello!</h1>
        </div>

        <p id='message'>Lorem ipsum dolor<br />sit amet, consectetur<br />adipiscing elit.
        </p>

        <div class='button'>
            <a class='btn' href='#portfolio'>Lorem!</a>
            <a class='btn' href='#contact'>Ipsum!</a>
        </div>   
    </div>     
</div>
</div>

css 的样式：

.wrap {
display: block;
float: left;
min-width: 100%;
overflow: auto;
}

#header {
display: block;
float: left;
background: #fff;
min-width: 100%;
width: 100%;
margin: auto;
min-height: 100vh;
background-image:url(http://i.imgsafe.org/81ed908.jpg);
overflow: auto;
}

#header, #footer {width: 100%;}

#about {    
display: block;
margin: 0 auto;
position: absolute;
top: 24%;
left: 25%;
width: 48%;
text-align: center;
font: 300 3.3em 'Source Sans Pro', sans-serif;
color: #fff;
}

#hello {
display: inline-block;
font-weight: 700;
}

.button {
margin: 0 auto;
padding: 0px 0px;
}

.btn {
margin: 0 auto;
margin-top: 46px;
margin-right: 6px;
margin-left: 6px;
padding: 9px 27px 9px 27px;
display: inline-block;
text-align: center;
text-decoration: none;
font-size: 17px;
color: #fff;
background: #2de0bc;
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
}

.btn:hover {
background: #56edcc;
text-decoration: none;
}

.btn:visited {color: #fff;}

Answer 1

从 #about

中删除 position: absolute

Answer 2

从问候语文本中删除 <br /> 标签。

JSFiddle

Answer 3

在 css

中添加了一些媒体查询

@media(max-width:960px){
  #about{
    font-size: 2.5em;
  }
}
@media(max-width:767px){
  #about{
    position: static;
    margin-top: 30px;
  }
}

https://jsfiddle.net/gxpwxhfh/7/

我无法使 parent div 展开以适应其内容

I'm having trouble making the parent div expand to fit its content

html

css

overflow

expand

contain