Estou tentando fazer a DIV pai ser preenchida por todas as DIVS filhas, porém já tentei várias coisas e não funciona. Acaba sempre a DIV pai sendo extrapolada pelas filhas.
EDIT: Testei meu código exemplo e fica assim:
DIV pai = #corpo
;
DIVs filhas = todas as DIVS dentro de #corpo
* {
margin: 0;
padding: 0;
}
nav {
background: blue;
width: 100%;
height: 34px;
display: flex;
justify-content: space-between;
}
#corpo {
width: 100%;
height: 100%;
background: red;
display: flex;
flex-direction: column;
align-items: center;
overflow: visible;
}
#corpo div {
clear:both;
border: 1px solid gray;
border-radius: 8px;
margin-top: 5px;
margin-bottom: 5px;
text-align: center;
width: 200px;
height: 200px;
}
#destaques {
background: yellow;
width: 200px;
height: 30px;
}
.post {
background: lightgray;
}
.post h1 {
margin-bottom: 30px;
font-size: 14px;
}
.post img {
width: 200px;
height: 100px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
#footer {
background: lightgreen;
clear: both;
}
<nav>
<div id="menu">Logo</div>
<div id="logo"><img src="logo.png"></div>
<div div="search">Search</div>
</nav>
<div id="corpo">
<div class="post"> <img src="https://unsplash.it/200/300?random=1" />
<h1>Neutralidade da rede: planos com whatsapp gratuito são ou nao ilegais?</h1>
<p>11 MAR 17</p>
</div>
<div class="post"> <img src="https://unsplash.it/200/300?random=2" />
<h1>Neutralidade da rede: planos com whatsapp gratuito são ou nao ilegais?</h1>
<p>11 MAR 17</p>
</div>
<div class="post"> <img src="https://unsplash.it/200/300?random=3" />
<h1>Neutralidade da rede: planos com whatsapp gratuito são ou nao ilegais?</h1>
<p>11 MAR 17</p>
</div>
<div class="post"> <img src="https://unsplash.it/200/300?random=4" />
<h1>Neutralidade da rede: planos com whatsapp gratuito são ou nao ilegais?</h1>
<p>11 MAR 17</p>
</div>
<div class="post"> <img src="https://unsplash.it/200/300?random=5" />
<h1>Neutralidade da rede: planos com whatsapp gratuito são ou nao ilegais?</h1>
<p>11 MAR 17</p>
</div>
</div>
<div id="footer"> Footer </div>