JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>

   <div id="outer">
      <div id="outer2">
         <div id="inner">

         </div>
      </div>
   </div>

</body>
</html>

CSS

#outer {
          width: 1000px;
          height: 320px;
          background: green;
          position: absolute;
          left: 30px;
          top: 100px;
          display: block;
       }
 
       #outer2 {
        background-color: #FFFFFF;
        margin: 0 1px 1px;
        overflow: hidden;
        width: auto;
       }
 
       #inner {
          height: 300px;
          margin: 10px;
          background: red;
       }

JavaScript

$('#outer2').css('display', 'none');
alert("outer+" + $('#inner').outerHeight(true));
alert("outer-" + $('#inner').outerHeight());