Element height not being returned for immediate child element

Question

I have the following Html:

<div id="cookie-notice" class="banner-message with-icon">
    <div class="message-container">
        <div class="icon"><img src="/Assets/Media/Images/cookies.svg" alt="Cookies"></div>
        <div class="message">We use cookies for essential functionality and to track visits.</div>
    </div>
    <div class="button-container">
        <a class="md-flat-button" data-close-id="cookie-notice">Dismiss</a>
    </div>
</div>

As it is a banner, it starts life hidden, in this case using, height: 0; on the banner message level.

At present I use jquery to return the height of the message span, which works. I can also get the height of the icon element if required.

However, the height of the message-container returns 0.

What I can't understand is why then, do all child elements not return 0, rather than just the immediate child.

More importantly, how can I fix it?

* UPDATE *

I have found what is causing the issue - but unfortunately don't know how to fix it yet.

The snippet shows two examples, the first one using flexbox to align the two boxes alongside each other, and other without flexbox.

As you can see one returns a height for the container, the other doesn't.

The design dictates that the div's are on the same line and as there are approx 8 variations of alignment, flexbox would still be the preferable solution.

 $(document).ready(function () { $banner1 = $("#banner1").first(); $container1 = $banner1.find(".message-container").first(); $message1 = $container1.find(".message").first(); var containerHeight1 = $container1.height(); var messageHeight1 = $message1.height(); $("#result1").html("Message height is: " + messageHeight1 + ", Container height is: " + containerHeight1 + " - flexbox"); $banner2 = $("#banner2").first(); $container2 = $banner2.find(".message-container").first(); $message2 = $container2.find(".message").first(); var containerHeight2 = $container2.height(); var messageHeight2 = $message2.height(); $("#result2").html("Message height is: " + messageHeight2 + ", Container height is: " + containerHeight2 + " - no flexbox"); }); 

 .banner-message { height: 0; overflow:hidden; } #banner1 { display: flex; } .button-container a { padding: 0 16px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="banner1" class="banner-message"> <div class="message-container"> <div class="message">This is a bit of text that I need to get the height of</div> </div> <div class="button-container"> <a>BUTTON</a> </div> </div> <div id="result1"></div> <!-- Second test - this time with out height of zero --> <div id="banner2" class="banner-message"> <div class="message-container"> <div class="message">This is a bit of text that I need to get the height of</div> </div> <div class="button-container"> <a>BUTTON</a> </div> </div> <div id="result2"></div> 

Answer 1

This is because of flexbox and the default align behavior which is stretch . For the first case when you set height:0 to flex container the height of the child element (the flex item) will stretch to fit the parent height; thus it will also have height:0

To better see this, remove overflow:hidden and add borders:

 $(document).ready(function() { $banner1 = $("#banner1").first(); $container1 = $banner1.find(".message-container").first(); $message1 = $container1.find(".message").first(); var containerHeight1 = $container1.height(); var messageHeight1 = $message1.height(); $("#result1").html("Message height is: " + messageHeight1 + ", Container height is: " + containerHeight1 + " - flexbox"); $banner2 = $("#banner2").first(); $container2 = $banner2.find(".message-container").first(); $message2 = $container2.find(".message").first(); var containerHeight2 = $container2.height(); var messageHeight2 = $message2.height(); $("#result2").html("Message height is: " + messageHeight2 + ", Container height is: " + containerHeight2 + " - no flexbox"); }); 

 .banner-message { height: 0; margin-bottom:50px; } #banner1 { display: flex; } .message-container a { padding: 0 16px; } #banner1, #banner2 { border: 1px solid red; } .message-container { border: 1px solid green; } #result1,#result2 { background:yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="banner1" class="banner-message"> <div class="message-container"> <div class="message">This is a bit of text that I need to get the height of</div> </div> <div class="button-container"> <a>BUTTON</a> </div> </div> <div id="result1"></div> <!-- Second test - this time with out height of zero --> <div id="banner2" class="banner-message"> <div class="message-container"> <div class="message">This is a bit of text that I need to get the height of</div> </div> <div class="button-container"> <a>BUTTON</a> </div> </div> <div id="result2"></div> 

As you can see the height you are caluclating is defined by the green borders and in the first case it's 0 but not in the second case.

To avoid this change the alignment to something different from stretch:

 $(document).ready(function() { $banner1 = $("#banner1").first(); $container1 = $banner1.find(".message-container").first(); $message1 = $container1.find(".message").first(); var containerHeight1 = $container1.height(); var messageHeight1 = $message1.height(); $("#result1").html("Message height is: " + messageHeight1 + ", Container height is: " + containerHeight1 + " - flexbox"); $banner2 = $("#banner2").first(); $container2 = $banner2.find(".message-container").first(); $message2 = $container2.find(".message").first(); var containerHeight2 = $container2.height(); var messageHeight2 = $message2.height(); $("#result2").html("Message height is: " + messageHeight2 + ", Container height is: " + containerHeight2 + " - no flexbox"); }); 

 .banner-message { height: 0; margin-bottom:50px; } #banner1 { display: flex; align-items:flex-start; /*added this*/ } .message-container a { padding: 0 16px; } #banner1, #banner2 { border: 1px solid red; } .message-container { border: 1px solid green; } #result1,#result2 { background:yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="banner1" class="banner-message"> <div class="message-container"> <div class="message">This is a bit of text that I need to get the height of</div> </div> <div class="button-container"> <a>BUTTON</a> </div> </div> <div id="result1"></div> <!-- Second test - this time with out height of zero --> <div id="banner2" class="banner-message"> <div class="message-container"> <div class="message">This is a bit of text that I need to get the height of</div> </div> <div class="button-container"> <a>BUTTON</a> </div> </div> <div id="result2"></div>