The height of the child divs does not match the parent div

Question

I have 7 divs wrapped in 3 divs . All but the first div are set to width: 0 , and they are all set to inline-block . The outermost div has a set height of 166px .

So, this comes out, the only child (7) divs you see is the first. The problem is that the third wrapper ( .wrapperLongInner ) is .wrapperLongInner than its grandparents div . .wrapperLongInner's height is calculated as if the 7 divs were lying on top of each other, although they are side by side due to flex .

How can I get .wrapperLongInner so that the default is the same height as the parent parent?

Jsfiddle

 .wrapperShortOuter { overflow: hidden; background-color: lightgreen; } .wrapperLongInner { display: flex; align-items: flex-start; background-color: lightblue; } .content { overflow: hidden; display: inline-block; width: 0; } 

 <div id="fullWrapper" style="height: 166px; width: 536px;"> <div class="wrapperShortOuter"> <div class="wrapperLongInner" style="width: 1072px;"> <div class="content" style="width: 536px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div> <div class="content">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit</div> <div class="content">Tin voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> <div class="content">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</div> <div class="content">doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem</div> <div class="content">quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div> <div class="content">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</div> </div> </div> </div> 

Answer 1

You will need to specify height: 100% in the .wrapperLongInner class: -

 .wrapperLongInner { display: flex; align-items: flex-start; background-color: lightblue; height: 100%; } 

Note - In Internet explorer there is a binding mechanism that they use if the height: 100%. Thus, you will need to give a height: 100% for all divs in the chain until a parent div with a fixed height (not a percentage) appears. If the chain breaks, the height will not be applied to the div. For I.E. you need to do something like this together with the code above: -

 .wrapperShortOuter { overflow: hidden; background-color: lightgreen; height: 100%; } 

Here you can find jsFiddle .

Answer 2

Based on your provided html, it seems like you can just provide its parent element ( .wrapperShortOuter ) height: 100% , which in turn will take the height of its "grandparent":

Js fiddle

 .wrapperShortOuter { overflow: hidden; background-color: lightgreen; height: 100%; } 

Answer 3

You must set the height for parents and grandfathers. Remove width:0; from the contents of the div and add float:left instead

 .wrapperShortOuter{ height:100%; } .wrapperLongInner{ height:100% } .content{ float:left; } 

Answer 4

You use height: inherit; for the CSS class .wrapperShortOuter .

The inherit keyword indicates that a property should inherit its value from its parent element.

Live example: https://jsfiddle.net/etnkj0Lp/2/

 .wrapperShortOuter { overflow: hidden; background-color: lightgreen; height: inherit; }