Высота элемента не возвращается для непосредственного дочернего элемента

Question

У меня есть следующий 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>

Поскольку это баннер, он начинает скрытую жизнь, в данном случае используя height: 0; на уровне сообщения баннера.

ВВ настоящее время я использую jquery для возврата высоты диапазона message, который работает.Я также могу получить высоту элемента icon, если требуется.

Однако высота message-container возвращает 0.

Что я не могу понять, так это почемувсе дочерние элементы не возвращают 0, а не только непосредственный дочерний элемент.

Что более важно, как я могу это исправить?

* ОБНОВЛЕНИЕ *

Я нашел причину проблемы, но, к сожалению, пока не знаю, как ее исправить.

Во фрагменте приведены два примера: первый использует flexbox для выравнивания двух боксов рядом друг с другом, а другой - безflexbox.

Как вы можете видеть, один возвращает высоту для контейнера, другой - нет.

Конструкция предполагает, что элементы div находятся на одной линии и что существует около 8 вариантоввыравнивания, flexbox все еще был бы предпочтительным решением.

$(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

Это из-за flexbox и поведения выравнивания по умолчанию, которое stretch.В первом случае, когда вы установите height:0 для flex-контейнера, высота дочернего элемента (элемента flex) будет растягиваться, чтобы соответствовать родительской высоте;таким образом, он также будет иметь height:0

Чтобы лучше это видеть, удалите overflow:hidden и добавьте границы:

$(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>

Как вы видите, вычисляемая высота определяется зелеными границами и в первом случае равна 0, но не во втором.

Чтобы избежать этого, измените выравнивание на что-то отличное от растяжения:

$(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>