Home How to determine the height of hidden/overflowing contents inside a `flex-grow:1` container

Questions

How to determine the height of hidden/overflowing contents inside a `flex-grow:1` container

June 9, 2022

I have a container set with overflow:hidden & flex-grow:1. When the contents overflow, how do I determine their height with jQuery? I need this value to create a custom scrollbar.

Example:

$(document).ready(function(){
  $("body").append("<p>" + $("div.body").height() + "</p>");
  $("body").append("<p>" + $("div.body").innerHeight() + "</p>");
  $("body").append("<p>" + $("div.body").outerHeight() + "</p>");
  
  //hack
  $("div.body").css("overflow", "visible");
  $("body").append("<p>" + $("div.body").height() + "</p>");
  $("body").append("<p>" + $("div.body").innerHeight() + "</p>");
  $("body").append("<p>" + $("div.body").outerHeight() + "</p>");
  $("div.body").css("overflow", "hidden");
});

div.box {
  width:150px;
  height:150px;
  outline:1px solid;
  display:flex;
  flex-direction:column;
}

div.body {
  overflow:hidden;
  flex-grow:1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <div class="head">head</div>
  <div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget ultrices elit. Mauris in ornare erat. Vivamus interdum turpis nec ipsum eleifend, eu sollicitudin purus porta. Vivamus in malesuada nisi. Donec rutrum urna ipsum, quis euismod dolor venenatis in.</div>
  <div class="footer">footer</div>
</div>

The only hack I found is to set the element’s overflow to visible, get metrics, and set it back to hidden immediately.

>Solution :

Wrap the content into an additional container element, and then simply measure the height of that.

$(document).ready(function(){
  $("body").append("<p>" + $("div.body > div").height() + "</p>");
});

div.box {
  width:150px;
  height:150px;
  outline:1px solid;
  display:flex;
  flex-direction:column;
}

div.body {
  overflow:hidden;
  flex-grow:1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <div class="head">head</div>
  <div class="body"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget ultrices elit. Mauris in ornare erat. Vivamus interdum turpis nec ipsum eleifend, eu sollicitudin purus porta. Vivamus in malesuada nisi. Donec rutrum urna ipsum, quis euismod dolor venenatis in.</div></div>
  <div class="footer">footer</div>
</div>