У меня есть контейнер с двумя гибкими коробками внутри.
- Первый flex-box - это заголовок моего блока содержимого.
- У меня есть еще один flex-box, который является контейнером для содержимого блока содержимого.
Всякий раз, когда я уменьшаю свой браузер, заголовок переполняется, закрывая часть моего контента в окне контента.
В идеале, я бы хотел, чтобы заголовок давил содержимое, а не закрывал его; Однако я не могу понять, где я иду не так.
Любая помощь будет оценена.
<head>
<style>
body{
margin:0;
padding:0;
height:100%;
width:100%;
background-color:#F8F8F8;
}
.wrapper{
padding-top:60px;
padding-left:60px;
display:flex;
flex-wrap:wrap;
}
.content-box{
flex:1 0 30%;
min-height:360px;
position: relative;
background-color:white;
border-radius:4px;
margin:10px;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
}
.header-wrapper{
flex:1;
background-color:purple;
position: absolute;
margin-left:5%;
border-radius:2px;
top: -15;
min-height:75px;
width:90%;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
}
.header{
}
.header-info{
}
.header p{
position: absolute;
color: white;
top: 30;
left: 12;
}
.header h1{
position: absolute;
color: white;
top: -15;
left: 10;
}
.content-wrapper{
margin-top:5%;
}
.content{
border:1px solid black;
margin-left:5.5%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content-box">
<div class="header-wrapper">
<h1>Title</h1>
<p>Subtext</p>
</div>
<div class="content-wrapper">
<div class="content">
<p>First Content Content</p>
</div>
</div>
</div>
</div>
</body>
</html>