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

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 >
  <div >head</div>
  <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 >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.

CodePudding user response：

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 >
  <div >head</div>
  <div ><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 >footer</div>
</div>