Dives daughters extrapolate parent div

Navigation
0

I'm trying to make the DIV parent be populated by all DIVS daughters, however I've tried several things and it does not work. It always ends the DIV father being extrapolated by his daughters.

EDIT: I tested my example code and it looks like this:

DIV parent = #corpo ;

DIVs daughters = all DIVS within #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>Neutralidadedarede:planoscomwhatsappgratuitosãoounaoilegais?</h1><p>11MAR17</p></div><divclass="post"> <img src="https://unsplash.it/200/300?random=2"/><h1>Neutralidadedarede:planoscomwhatsappgratuitosãoounaoilegais?</h1><p>11MAR17</p></div><divclass="post"> <img src="https://unsplash.it/200/300?random=3"/><h1>Neutralidadedarede:planoscomwhatsappgratuitosãoounaoilegais?</h1><p>11MAR17</p></div><divclass="post"> <img src="https://unsplash.it/200/300?random=4"/><h1>Neutralidadedarede:planoscomwhatsappgratuitosãoounaoilegais?</h1><p>11MAR17</p></div><divclass="post"> <img src="https://unsplash.it/200/300?random=5"/><h1>Neutralidadedarede:planoscomwhatsappgratuitosãoounaoilegais?</h1><p>11MAR17</p></div></div><divid="footer"> Footer </div>
    
asked by anonymous 14.03.2017 / 18:54

2 answers

4

Here everything appears normal, but tries to apply overflow: auto to #corpo .

EDIT:

Remove% with%.

    
14.03.2017 / 19:21
1

Complementing @LeonFreire's response The cause of the problem is overflow: visible next to 'height: 100%, but ...

Why?

height: 100% takes 100% of the screen according to its parent element, and let's say ... How big is your div #corpo ? 100%.
Okay, not very clear, 100% was set according to the size of the% cos (visible area of the screen), because the body has that size (100% of the screen) in the load, which is fixed (read absolute ).

The% w / o%, forces the content to appear even if the parent is not sized for it, so the content "extrapolated" because the content was a size larger than the div, which was the size of the visible screen .

But do you know the real reason for this "bug"?

Our browser is not using the correct HTML (5) specifications, for lack of viewport , it kicked one based on your html [1].
In some version the overflow: visible tag initially has the size of the viewport and not the size of its content, causing it to give this problem, <!DOCTYPE html> in <body> would be the size of 100% locking it in that size, not being a relative value (in the body, on my screen the body had a fixed value of ~ 700px, so #corpo has the size of <body> ), because by default, a relative value (%) inside another is ignored because it is not possible to do the calculations. So if the value was locked in the viewport size, you have the problem that the div content exceeds the size of the div, so overflow is necessary to show it, but that's the problem, #corpo lets things "extrapolate" and the problem has been solved by removing 700px because you return the value of the overflow:visible div to relative content, not to the fixed size of height:100% .

Maybe it was confusing, but it's just to say that #corpo was missing because it causes <body> to also have size relative to content hehe

[1] I do not know exactly what browsers' behavior regarding DOCTYPE's omission, and what version of the Document Type Definition (DTD) is used.

    
16.03.2017 / 21:41
Problem with methods Full Calendar does not respect end date