Warum füllt ein Kind seine Größe nicht, wenn andere es tun?

Question

Ich habe eine Reihe von verschachtelten divs, die als so aussehen: Nested divs screenshot

HTML und CSS unten sind. Wie Sie jedoch aus dem Bild sehen können, füllt das obere rechte div (.inner-top-mark) nicht seine gesamte Höhe. Ich habe bereits festgestellt, dass dies gelöst werden kann, indem diese div's display: zu flex, table oder inline-block setzen. Meine Frage ist einfach warum dies passiert, wenn die .inner-bottom-opts divs nicht dasselbe Problem haben. Ich habe ein paar ähnliche Fragen beobachtet, aber keine scheint sich mit dem Warum-Aspekt zu befassen, und die spezielle Lösung für jede Person scheint von Fall zu Fall unterschiedlich zu sein, daher ist sie nicht hilfreich, um zukünftige Probleme zu verhindern.

HTML:

<div class="container"> 
    <div class="part1_labelleft"> 
    <p><strong>Lorem ipsum</strong></p> 
    </div> 

    <div class="part1_markup_right"> 
    <div class="inner-top-mark"> 
     <p><em><strong>Lorem ipsum</strong></em></p> 
    </div> 

    <div class="inner-bottom-opts"> 
     <p>Lorem ipsum</p> 
    </div> 
    <div class="inner-bottom-opts"> 
     <p>Lorem ipsum</p> 
    </div> 
    <div class="inner-bottom-opts"> 
     <p>Lorem ipsum</p> 
    </div> 
    <div class="inner-bottom-opts"> 
     <p>Lorem ipsum</p> 
    </div> 

    </div> 
</div> 

CSS:

.container { 
    float: left; 
    box-sizing: border-box; 
    margin: 0; 
    width: 800px; 
} 
div[class*="labelleft"] { 
    display: flex; 
    float: left; 
    width: 10%; 
    min-height: 100px; 
} 
div[class*="labelleft"] p { 
    margin: auto 0; 
} 
.part1_markup_right { 
    float: left; 
    width: 90%; 
    box-sizing: border-box; 
} 
.inner-top-mark { 
    width: 100%; 
    margin: 0; 
} 
.inner-bottom-opts { 
    float: left; 
    width: 25%; 
    margin: 0; 
    padding: 10px; 
    box-sizing: border-box; 
} 
.part1_markup_right p { 
    margin: 0.75em 0; 
} 
.inner-top-mark p { 
    margin-left: 10px; 
} 
.part1_markup_right, 
.inner-bottom-opts + .inner-bottom-opts{ 
    border-left: 1px solid #acacac; 
} 
.inner-top-mark { 
    border-bottom: 1px solid #acacac; 
    background-color: #ededed; 
} 
.container { 
    border: 1px solid #acacac; 
} 

Vielen Dank im Voraus.

Answer 1

Ihr div "inner-top-mark" ist in einer Liste floated Elemente, aber es selbst nicht float. Dies ist ein Nebeneffekt, der dazu führt, dass dein div nur die Höhe seiner untergeordneten Elemente hat (in deinem Fall das "p"). Also wenn Sie float hinzufügen: links oder float: erben Sie zu Ihrem "inner-top-mark" -Div, es wird die richtige Höhe haben.